CSS Dropdown menu for the header- With Categories!

[jettrue]

Thanks for this menu jettrue! You rock such a time saver :)

Just one last request (I requested the ezpages function)

Would it be possible to be able to sort the ezpages I notice you can't sort them. (like top from bottom) It just sorts random no matter the sort order. Unless I'm doing something wrong.

Thanks!

Ah ha! I made a boo boo. Either you can put in a sort order for the sidebox in the ezpages section and that will sort it, or you can open up includes/modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php, and on line 23 change "order by sidebox_sort_order" to "order by header_sort_order".

[Woodymon]

Ah ha! I made a boo boo. Either you can put in a sort order for the sidebox in the ezpages section and that will sort it, or you can open up includes/modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php, and on line 23 change "order by sidebox_sort_order" to "order by header_sort_order".

Gasp. The simple fix I have been looking for two months plus. ;-) Back in March I decided the heck with auto adding ez-pages to the menu, but now I will.

So I assume now the current consensus is:

where status_header = 1 and header_sort_order > 0 order by header_sort_order,

(NOTE ABOVE: "and header_sort_order > 0", not the previously recommended "and sidebox_sort_order > 0")

Woody

[Woodymon]

What are the recommended methods to "center" the menu bar? Still having issues transforming my way of thinking from oldskool tables to new age CSS ;-)

Thanks.

Woody

[jettrue]

Gasp. The simple fix I have been looking for two months plus. ;-) Back in March I decided the heck with auto adding ez-pages to the menu, but now I will.

So I assume now the current consensus is:

where status_header = 1 and header_sort_order > 0 order by header_sort_order,

(NOTE ABOVE: "and header_sort_order > 0", not the previously recommended "and sidebox_sort_order > 0")

Woody

Hi Woody,

Yep, I have two errors in this mod that I need to update. One, I need to add the code to make the discount coupons link remove itself when the mod is not in use (I addressed this in my apple zen thread, but didn't yet fix it here), and TWO, I need to fix the above issue.

I actually change line 23 in includes/modules/sideboxes/YOUR-TEMPLATE/ezpages_drop_menu.php to:

$page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_header = 1 order by header_sort_order, pages_title");

Because in my mind, a person shouldn't have to enter a sort order (they can leave it to 0 if they want to) since status_header = 1 is there. I had people wonder why if they set the EZPage they're working on to "YES" for the header, why it still doesn't show up (because they didn't put a sort order in). Maybe I'm missing the reason why the developers chose to do it that way, but I think my change makes it more fool proof.

[humbll]

1. love the menu.
2. i know this is a trivial matter, but i would like to make the color of the menu same as the rest of the site - blue-grey background and grey or white words. what do i change the colors to in the stylesheet_header_menu.css ? below is the first section of my stylesheet.css for my template, i am confused by all the color definitions.
3. also, if you view the site, on either side of the menu is white space, is there a way to make that bule-grey as well, or perhaps extend the menu to cover it?
Thanks in advance.

mytemplates stylesheet.css:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #D4D4D4;
}

.centershop {width: 100%}

a img {border: none; }

a:link, #navEZPagesTop a:link, #categoriesContent a:link, .sideBoxContent a:link, #navMain a:link, #informationContent a:link, #navSuppWrapper a:link, #siteinfoLegal a:link {
color: #F1EDE7;
text-decoration: none;
}

a:link, #navEZPagesTOC ul li a:link {
color: #63859D;
text-decoration: none;
}

a:visited, #navEZPagesTop a:visited, #categoriesContent a:visited, .sideBoxContent a:visited, #navMain a:visited, #informationContent a:visited, #navSuppWrapper a:visited, #siteinfoLegal a:visited {
color: #F1EDE7;
text-decoration: none;
}

a:visited, #navEZPagesTOC ul li a:visited {
color: #808080;
text-decoration: none;
}

a:hover, #navEZPagesTop a:hover, #categoriesContent a:hover, #navMain a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover, .sideBoxContent a:hover, #informationContent a:hover, #navSuppWrapper a:hover, #siteinfoLegal a:hover {
color: #3B3B3B;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover {
color: #AFC0CD;
text-decoration: none;
}

a:active {
color: #0000FF;
}

h1 {
font-size: 1.4em;
font-family: georgia, tahoma;
color: #63859D;
}

h2 {
font-size: 1.3em;
}

h3 {
font-size: 1.2em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 3px;
}

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}

FORM, SELECT, INPUT {
display: inline;
font-size: 10px;
margin: 0.1em;
}

TEXTAREA {
float: left;
margin: auto;
display: block;
width: 95%;
}

input:focus, select:focus, textarea:focus {
background: #D4D4D4;
}

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #63859D;
}

.hiddenField {display: none}

.visibleField {display: inline}

LEGEND {
font-weight: bold;
padding: 0.3em;
}

LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

#logo {
float: left;
padding-top: 17px;
padding-left: 18px;
}

LABEL.inputLabel {
width: 11em;
float: left;
}

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 12em;
float: left;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #000000;
}

.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess {
background-color: #99FF99;
color: #000000;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
}

#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper {
width: 100%;
height:110px;
background-image: url(../images/header.gif);
background-repeat: no-repeat;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#tagline {
color:#63859D;
font-family: georgia;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 20px;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}

.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 30px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navCatTabsWrapper {
margin: 0em;
background-color: #D4D4D4;
font-weight: bold;
color: #63859D;
height: 1%;
width: 744px;
border: 3px double #63859D;
}

#navMain ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
font-size: 12px;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navSupp ul {
margin: 0;
font-size: 10px;
text-align: center;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #63859D;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
}


#navBreadCrumb {
background-color: #FFFFFF;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
color: #606060;
font-weight: bold;
padding-top: 7px;
padding-left: 5px;
padding-bottom: 11px;
}

#navColumnOne {
background-color: #D4D4D4;
}

#navColumnTwo {
background-color: #D4D4D4;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/*.content,*/
#productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 0.5em;
}

#catBoxDivider {
color: #FFFFFF;
width: 75%;
text-align: center;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 8px;
}

/*Shopping Cart Display*/
#cartAdd {
float: left;
text-align: center;
background-color: #D4D4D4;
margin: 1em;
border: 3px double #63859D;
padding: 1em;
}

.tableHeading TH {
border-bottom: 1px solid #cccccc;
}

.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #FFFF00;
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartOldItem {
color: #E1D8C9;
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartBoxTotal {
text-align: right;
color: #E4E4F1;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

#cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 2em 2em 2em 2em ;
}

.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}

/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1.1em;
color: #ffffff;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #005279;
text-decoration: none;
}

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-image:url(../images/box000.gif);
background-repeat: no-repeat;
padding: 20px;
}

.centerBoxHeading {
font-size: 12px;
background-image: url(../images/bar.gif);
background-repeat: repeat-x;
padding-top: 7px;
padding-bottom: 13px;
}

.leftBoxContainer, .rightBoxContainer {
background-image:url(../images/box001.gif);
background-repeat: repeat-y;
margin-top: 0px;
}

.sideBoxContent {
background-image:url(../images/box002.gif);
background-repeat: no-repeat;
font-size: 11px;
line-height: 125%;
background-position:bottom;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 25px;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
font-size: 11px;
text-align: center;
}

h3.leftBoxContainer, #whatsnewHeading, #searchHeading, #recordcompaniesHeading, #searchContent, #featuredContent, #specialsHeading, #manufacturersHeading, #reviewsHeading, #featuredHeading, #musicgenresHeading, #currenciesHeading, #shoppingcartHeading {
font-size: 11px;
text-align: center;
}

.productListing-rowheading {
font-size: 12px;
background-image: url(../images/bar.gif);
background-repeat: repeat-x;
height: 30px;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #0000CC;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* footer
--------------*/
#navSupp {
background-image: url('../images/bar2.gif');
background-repeat: repeat-x;
color: #606060;
font-size: 8px;
padding-top: 7px;
height: 23px;
}

#siteinfoLegal, .legalCopyright {
background-color: #63859D;
font-size:10px;
text-align: center;
padding: 3px;
}

/*misc*/
.back {
float: left;
}

.forward {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #D4D4D4;
height: 1.75em;
vertical-align: top;
}

.rowEven {
background-color: #DEE6EB;
height: 1.75em;
vertical-align: top;
}

CAPTION {
/*display: none;*/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

.tableHeading {
background-color: #E1D8C9;
height: 2em;
}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}

[jettrue]

1. love the menu.
2. i know this is a trivial matter, but i would like to make the color of the menu same as the rest of the site - blue-grey background and grey or white words. what do i change the colors to in the stylesheet_header_menu.css ? below is the first section of my stylesheet.css for my template, i am confused by all the color definitions.
3. also, if you view the site, on either side of the menu is white space, is there a way to make that bule-grey as well, or perhaps extend the menu to cover it?
Thanks in advance.

mytemplates stylesheet.css:

To change the colors of the menu, simply open up includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css and you may have to play around a bit to find what changes what.

My green in the template is this:
background:#D5E88F;

so replace #D5E88F with what you'd like instead of green.

My dark grey is #4f4f4f, so just replace that with the color you'd like.

The text is controlled with the color: tags, so just adjust those to the color you'd like.

3. try giving :#dropMenuWrapper the background color you'd like.

[kittytickles]

I'd like to create a dynamic Manufacturers drop-down, with the name "Designers" instead of "Manufacturers". Please let me know how I can do this within one of the "li" tags. It would be awesome if you can provide the code within the "li" tags for implementation.

Thanks!

[jettrue]

I'd like to create a dynamic Manufacturers drop-down, with the name "Designers" instead of "Manufacturers". Please let me know how I can do this within one of the "li" tags. It would be awesome if you can provide the code within the "li" tags for implementation.

Thanks!

I haven't added manufacturer capabilities dynamically yet. So you'll have to do this manually. You can use the backbone of thi code below, and just put your own links and page names in:

<li class="submenu"><a href="index.php?main_page=index">Information</a>
        <ul class="level2">
          <li><a href="index.php?main_page=shippinginfo">Shipping Info</a></li>
          <li><a href="index.php?main_page=privacy">Privacy Policy</a></li>
          <li><a href="index.php?main_page=conditions">Conditions of Use</a></li>
          <li><a href="index.php?main_page=about_us">About Us</a></li>
	  <li><a href="index.php?main_page=site_map">Site Map</a></li>
	  <li><a href="index.php?main_page=gv_faq">Gift Certificate FAQ</a></li>
	  <li><a href="index.php?main_page=discount_coupon">Discount Coupons</a></li>
	  <li><a href="index.php?main_page=unsubscribe">Newsletter Unsubscribe</a></li>
        </ul>
      </li>

[shackle]

I have a IE (6) error with the mod.

I installed everything correctly even the .htaccess file

When I type in www.mysite.com the menu won't drop down, but if I type mysite.com it works. Any clues to what is causing this? Works fine in FF.

I also get a error in IE saying access denied to csshover.htc

[Get Em Fast]

Shackle, try adding this to your index.php file to resolve this issue with IE:

<?php
$url = "http://www.your_site.com/";
header("Location: $url");
?>


Naturally, with the correct URL replacing "http://www.your_site.com/"