Zen Cart Logo
Forums / All Other Contributions/Addons / CSS Dropdown menu for the header- With Categories!

CSS Dropdown menu for the header- With Categories!

Views: 615,590

Results 561 to 580 of 2,344
18 Oct 2007, 8:36 PM
#561
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

CSS Dropdown menu for the header- With Categories!

HI Jettrue
Thanks for the help. My site is local but here is a picture of what i mean:

So the "SHOPPING CART" link Curls over onto a second line (in IE only)

Thanks for the help

Samantha

18 Oct 2007, 8:52 PM
#562
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

soupcan:

Hi all.

I've got a site that is just about done, but I've been wracking my brain over a few issues. I've gone through a good majority of the posts here over the last week or so and was not able to find a resolution.

In Internet Explorer (haven't had it happen in Firefox), when the CSS drop down menu comes in contact with a "Sort By" drop down menu in my catalog, the CSS drop down menu appears behind the "Sort By" drop down menu.

Any help is appreciated. If you need any other information, please let me know.

Thanks.

Yes, this is a known issue, IE always puts dropdown menus at a higher z-index than everything else, and there's no known way around it, as far as I've read. However, in the past I have instructed people to give that select menu a "float:right" attribute in the css, so that at least the drop down SELECT menu appears on the right of the page, which is no longer below the categories, therefore the css menu no longer goes behind it. If you send a link where this occurs, I can give you the exact css to remedy it. Though for pages like the "new" and "all" products page, this will take care of it:

#sorter {float:right;}

18 Oct 2007, 8:54 PM
#563
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

davidandrews:

HI Jettrue
Thanks for the help. My site is local but here is a picture of what i mean:

So the "SHOPPING CART" link Curls over onto a second line (in IE only)

Thanks for the help

Samantha

Again, are you using the most recent version of the menu?

Also, if there are any 70em's in your stylesheet_header_menu.css, try changing them to 100% instead.

19 Oct 2007, 5:57 AM
#564
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Apologies for not answering in full
Yes, this is the most recent version, my stylesheet CSS is below:

(I don't think there are 70 ems?)

body {
behavior: url(includes/csshover.htc);
}

/green/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#0589a5;}

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#0589a5;}
*/

div#dropMenu {
width:98%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin:0;
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:16.667%;
}

div#dropMenu ul.level1 {
width:98%;
margin:0 auto;
text-align:center;
background:#0589a5;
z-index:1000;
float:left;
}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid

#ffffff;}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} /
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /
this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

19 Oct 2007, 10:57 AM
#565
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

davidandrews:

Apologies for not answering in full
Yes, this is the most recent version, my stylesheet CSS is below:

(I don't think there are 70 ems?)

It's really hard for me to help, without seeing your site. I'm guessing there's some padding for the site (not in stylesheet_header_menu.css) that is preventing the menu from going all the way across.

19 Oct 2007, 11:57 AM
#566
davidandrews avatar

davidandrews

Zen Follower

Join Date:
Apr 2006
Posts:
108
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

The only other thing I have altered is my main stylesheet file, nothing else

Can this be altered in a way to stop it, or has the code centering the logo made it happen:

/**

  • Main CSS Stylesheet
  • @package templateSystem
  • @copyright Copyright 2003-2006 Zen Cart Development Team
  • @copyright Portions Copyright 2003 osCommerce
  • @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
  • @version $Id: stylesheet.css 5349 2006-12-22 20:34:40Z birdbrain $
    */

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #0589A5;
background-color: #0589A5;
}

a img {border: none; }

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

a:visited {
color: #0589A5;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}

a:active {
color: #0000FF;
}

h1 {
font-size: 1.5em;
color: #9a9a9a;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

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

/* Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {
height: 1%;
}
*/

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

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

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

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

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

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 {text-align: center;}

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

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

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

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
margin:0;
padding:0;
}

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 #9a9a9a;
}

.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: 90%;
vertical-align: top;
border: 1px solid #9a9a9a;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul,

#mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:100px;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#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, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

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

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
}

#navCatTabs ul li a {
color: #9a9a9a;
}

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

#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 {
padding: 0.5em 0.5em;
background-color: #ffffff;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #ffffff;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

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

.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: 0.9em;
}

/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}

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

.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: #33CC33;
position: relative; /do not remove-fixes stupid IEbug/
}

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

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

.cartRemoveItemDisplay {
width: 3.5em;
}

.cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #E4FEf5;
border: 1px solid #003D00;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

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

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}

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

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

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

.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: 0em 1em 1em 0em ;
}

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

.centerBoxWrapper {
border: 1px solid #9a9a9a;
height: 1%;
margin: 1.1em 0;
}

h2.centerBoxHeading {
font-size: 1.3em;
color: #ffffff;
}

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

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

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #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 {
text-align: center;
}

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

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #0589A5;
text-decoration: none;
}
A.category-top:hover {
color: #ff0000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-top:hover {
color: #ff0000;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #FF0000;
text-decoration: none;
}

A.category-top:hover {
color: #000000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

/misc/
.back {
float: left;
}

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}

.hiddenField {
display: none;
}
.visibleField {
display: inline;
}

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
}

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

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
height: 2em;
color: #FFFFFF;
}

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

19 Oct 2007, 12:50 PM
#567
strategy avatar

strategy

New Zenner

Join Date:
Oct 2007
Posts:
4
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

I noticed that the dropdown menu did not include the parent category in the child links, which means that if you also use the standard categories box, the parent categories don't open up when clicking a child category.

I not a programmer, but my quick fix was this...

in categories_ul_generator,php, around line 70,

find:

$category_link = $category_id;

Replace with:

if ($parent_id != '0') {
$category_link = $parent_id .'_'. $category_id;
} else {
$category_link = $category_id;
}

It seems to work fine, but was wondering if anyone could see potential problems or a way it could be done better

19 Oct 2007, 11:01 PM
#568
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

strategy:

I noticed that the dropdown menu did not include the parent category in the child links, which means that if you also use the standard categories box, the parent categories don't open up when clicking a child category.

I not a programmer, but my quick fix was this...

in categories_ul_generator,php, around line 70,

find:

$category_link = $category_id;

Replace with:

if ($parent_id != '0') {
$category_link = $parent_id .'_'. $category_id;
} else {
$category_link = $category_id;
}

It seems to work fine, but was wondering if anyone could see potential problems or a way it could be done better
If I understand your issue, this was fixed in the latest version of the menu, with adjustments to categories_ul_generator.php

19 Oct 2007, 11:05 PM
#569
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

davidandrews:

The only other thing I have altered is my main stylesheet file, nothing else

Can this be altered in a way to stop it, or has the code centering the logo made it happen:

A quick look doesn't turn up anything obvious. Really without seeing it live, I'm no good at troubleshooting.

25 Oct 2007, 1:37 AM
#570
srturner47 avatar

srturner47

Zen Follower

Join Date:
Oct 2007
Posts:
385
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

I am having trouble getting this to work with zen lightbox. I am using Apple Zen, Image Handler 2, and Zen Lightbox. Everything jives quite nicely, except when I open a lightbox, the dropdown menu bar doesn't turn grey and it is in front of the lightbox. In the fifth page of this thread I found this:

add

<div class="flash"><?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?></div>

to tpl_header.php

I tried doing this to /home/birdingd/public_html/includes/templates/apple_zen/common/tpl_header.php

but, all it seems to do is add another dropdown menu at the top of my screen.

Any ideas?

Thanks!

25 Oct 2007, 2:27 AM
#571
srturner47 avatar

srturner47

Zen Follower

Join Date:
Oct 2007
Posts:
385
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

UPDATE:

I figured it out!! :D

Here's how I did it. I hope this helps someone:

Find this line of code:

<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>

For my apple zen cart I found it in includes/templates/apple_zen/common/tpl_main_page.php

Then add <div class="zenLightboxHideMe"> before it and </div> after it.

So your final code should look like this:

<div class="zenLightboxHideMe"><?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?></div>

You can also change the class name for lightboxes to hide stuff in Admin-Configuration-Zen Lightbox

26 Oct 2007, 11:56 PM
#572
all4coffee avatar

all4coffee

Zen Follower

Join Date:
Jul 2007
Posts:
154
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

The CSS dropdown menu works fine in both Firefox and IE but I suspect it might cause the initial display shift when some pages load in Firefox (IE is OK). This is the link to one of the pages it happens on:
http://www.time-co.com/zencart/index.php?main_page=index&cPath=1_17

As I said in IE the page loads OK but w/ Firefox it loads the left column to the center and then returns it to the proper position. IS the drop down menu causing it?

27 Oct 2007, 2:35 AM
#573
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

all4coffee:

The CSS dropdown menu works fine in both Firefox and IE but I suspect it might cause the initial display shift when some pages load in Firefox (IE is OK). This is the link to one of the pages it happens on:
http://www.time-co.com/zencart/index.php?main_page=index&cPath=1_17

As I said in IE the page loads OK but w/ Firefox it loads the left column to the center and then returns it to the proper position. IS the drop down menu causing it?

No, the menu has absolutely nothing to do with that. Try giving .centerColumn a width.

27 Oct 2007, 7:17 AM
#574
vood avatar

vood

New Zenner

Join Date:
Sep 2007
Posts:
59
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

I have a major problem that I can't figure out. I moved my "About Us" link from the "Information" dropdown to the "Contact Us" dropdown. It works fine in IE7 but nothing drops down in FireFox. I'm using the latest version of FireFox and don't really know anything about PHP coding. Here is the code from the tpl_drop_menu.php file. Can someone tell me what I've done wrong?

  <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
    <ul class="level2">
      <li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>
      <li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
      <li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
  <?php if (defined('FILENAME_SITE_MAP')) { ?><li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
  <?php } ?><?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?><li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
  <?php } ?><?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?><li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li>
  <?php } ?><?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?><li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li><?php } ?>
    </ul>
  </li>
  
  <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
    <ul class="level2">
    <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
</ul> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> <ul class="level2"> <?php if ($_SESSION['customer_id']) { ?> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li><?php } else { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li> <?php } ?> </ul> </li> <?php if ($_SESSION['cart']->count_contents() != 0) { ?> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> <ul class="level2"> <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li> </ul> </li> <?php } else { ?> <li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li> <?php } ?> </ul> </div> </div>
27 Oct 2007, 12:22 PM
#575
sooraj avatar

sooraj

New Zenner

Join Date:
Oct 2007
Location:
singapore
Posts:
25
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hi,
When i tried to switch off the site map in the drop down menu i found an error.
Please update this in your css flyout header- tpl_drop_menu.php

initial line-

<?php if (defined('FILENAME_SITE_MAP')) { ?><li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>

corrected line-

<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?><li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>

sitemap status was not defined in the file..

The css layout was great work..keep it up..and thanks..:clap:

27 Oct 2007, 2:35 PM
#576
boriz avatar

boriz

New Zenner

Join Date:
Oct 2007
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hello,
I have some problems wit this DropDown menu. In IE, it works great, but in Firefox... grr :wacko:

FireFox:
[IMG]http://img221.imageshack.us/img221/2356/firefoxev8.th.jpg[/IMG]

Internet Explorer 7:
[IMG]http://img98.imageshack.us/img98/1675/ie7fv2.th.jpg[/IMG]

How can I fix this?
And... this:
[IMG]http://img233.imageshack.us/img233/9372/menuyh0.th.jpg[/IMG]
Please, HELP. Thanks!!! :smile::smile:

27 Oct 2007, 3:06 PM
#577
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Vood:

I have a major problem that I can't figure out. I moved my "About Us" link from the "Information" dropdown to the "Contact Us" dropdown. It works fine in IE7 but nothing drops down in FireFox. I'm using the latest version of FireFox and don't really know anything about PHP coding. Here is the code from the tpl_drop_menu.php file. Can someone tell me what I've done wrong?

  <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
    <ul class="level2">
      <li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>
      <li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
      <li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
<?php if (defined('FILENAME_SITE_MAP')) { ?><li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
<?php } ?><?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?><li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
<?php } ?><?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?><li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li>
<?php } ?><?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?><li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li><?php } ?>
    </ul>
  </li>
  
  <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
    <ul class="level2">
    <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
</ul> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> <ul class="level2"> <?php if ($_SESSION['customer_id']) { ?> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li><?php } else { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li> <?php } ?> </ul> </li> <?php if ($_SESSION['cart']->count_contents() != 0) { ?> <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> <ul class="level2"> <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li> </ul> </li> <?php } else { ?> <li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li> <?php } ?> </ul> </div> </div>

I would put everything back to original, then add the link like this:

<li class="submenu">
<a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a>
<ul class="level2">
<li><a href="/index.php?main_page=about_us">About Us</a></li>
</ul>
</li>
27 Oct 2007, 3:36 PM
#578
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

boriZ:

Hello,
I have some problems wit this DropDown menu. In IE, it works great, but in Firefox... grr :wacko:

Please, HELP. Thanks!!! :smile::smile:

If I could see a link, I could help more specifically. But, I can tell you that you need a <div class="clearBoth"></div> at the very end of includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

Also, I'm assuming it is breaking into two lines because there is probably some padding or margin on your site that is causing the menu to not have enough room.

Are you using the most recent version of the drop menu?

27 Oct 2007, 3:43 PM
#579
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

sooraj:

Hi,
When i tried to switch off the site map in the drop down menu i found an error.
Please update this in your css flyout header- tpl_drop_menu.php

initial line-

<?php if (defined('FILENAME_SITE_MAP')) { ?><li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>

corrected line-

<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?><li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>

sitemap status was not defined in the file..

The css layout was great work..keep it up..and thanks..:clap:

Yes, this among other things will be addressed in my next update... I actually already have it fixed on my test site, I just need to get it updated... thanks for the reminder!

27 Oct 2007, 3:47 PM
#580
boriz avatar

boriz

New Zenner

Join Date:
Oct 2007
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

first pic
http://img221.imageshack.us/my.php?image=firefoxev8.jpg
second pic
http://img98.imageshack.us/img98/1675/ie7fv2.th.jpg
third pic
http://img233.imageshack.us/my.php?image=menuyh0.jpg

Thanks for solving the first problem (with firefox) :hug: :flex:
Now.. menu is really breaking into two lines (shoping cart is in new line) but it's not the main issue... the real problem is that when you go to any link (let's say Categories) the table is not entirely grey, so things behind are seen.
edit:
And yes, I'm using the latest dropdown menu.