CSS Dropdown menu for the header- With Categories!

[adam9110]

Hello Body,
Thanks for your MOD,
It works fine.
But i Just wonder why there are only six caterogies can display on the first horizontal line . I mean after that , the senven, eighth ......... will display on another horizontal line.
Thanks for any help.

[jettrue]

Hello Body,
Thanks for your MOD,
It works fine.
But i Just wonder why there are only six caterogies can display on the first horizontal line . I mean after that , the senven, eighth ......... will display on another horizontal line.
Thanks for any help.

Who's Body? Just curious, LOL~

If you're talking about this version:

http://www.zen-cart.com/index.php?ma...roducts_id=523

Its designed differently than the one I designed. If you look at www.zencart137.jadetrue.com, you can see my version. The categories drop down in a single vertical drop down menu, they are not spread out horizontally like the other mod. The link with my version is in my sig.

[shackle]

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!

[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;
}