CSS Dropdown menu for the header- With Categories!

[Woodymon]

if you could post any code and/or CSS changes used to customize your menu bar..

I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template.

Woody

[jettrue]

I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template.

Woody

Hi Woody,

I think I'm still trying to visualize your issue. As I mentioned, I'm a very visual person, and I always have a hard time working with offline sites. If I see it, I can usually figure it out quickly.

If I understand correctly, you want a menu that is centered. :-) Now, do you want the drop down items to start all the way to the left, and end all the way to the right, so that there is no empty menu space? Or do you want it centered with space between the menu and the edges of the site?

I also understand that you want the menu to match the background color of your site. Is it a solid color? If so, instead of using a gif, you can just give dropMenuWrapper a background color that matches your sites color.

I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site. So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

[Woodymon]

Or do you want it centered with space between the menu and the edges of the site?

Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site.

It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

Thanks again for the advice. Most appreciated.
Woody

[Moebiusenterprises]

Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.


It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).



Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

Thanks again for the advice. Most appreciated.
Woody

you might want to take a look at our menu. Ours runs 'side to side' (aka 100%) of the window, but you could easily change the percentage to suit, or use a transparent base wrapper and a color wrapper for the actual dropdowns. Perhaps the transparent base, with a color flip on mouseover/hover?

[jettrue]

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

I'm confused, why use a colored gif, if you can just set the background color?

background:#000000;

It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

You can change em's to pixels. Change the padding from em's to pixels, etc. Get rid of em's you get rid of resizing with font changes.

Already did something similar but not getting the centering happening due to that space to the right of the menu.

Have you tried switching to percentages like my post? That gets rid of the extra space to the right of the menu.

[Woodymon]

Jade-

I uploaded original CSS (v. 1.2 dated Feb 23, 2007) and then made edits as you recommended in this thread on June 17, 2007 and presto. Just what I was looking for... mostly.

The menu centers well in both Firefox and IE6. But when I adjust type size in IE6 I get mixed results.

At small/smaller/larger/largest text sizes the menu stays on one line. Cool!

But in IE6 when set text size to medium, the menu wraps to two lines ("Shopping Cart" moved to under "Home"). Strange that this only happens at default medium type size in IE6? And only in IE6, does not wrap not in FF.

Any ideas? My current relevant CSS is below.

I still need to test IE7 when it goes online but that can wait.

Thanks for your assist.

Woody

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 2.17em; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 1em; /* ORIG */
	padding-bottom: 1em; /*NOT IN ORIG */
	}
	
div#dropMenu {
	width:70em; /* ORIG */
	margin:0 auto; /* ORIG */
        text-align:center; /* ORIG */
	z-index:1000; /* ORIG */
	position:relative; /* ORIG */
	}

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

div#dropMenu ul.level1 {
	width:70em; /* ORIG */
	margin:0 auto; /* ORIG */
	background:#4F4F4F;  /* ORIG */
	text-align:center; /* ORIG */
	height:2.17em; /* ORIG */
	z-index:1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	/* padding: .6em 2em .6em 2em; */ /* ORIG */
	padding: .6em 0 .6em 0; /* by Jade */
	text-decoration: none; /* ORIG */
	text-transform: uppercase; /* ORIG */
	color:#ffffff; /* ORIG */
	text-align: center; /* ORIG */
	border-right:1px solid #ffffff; /* ORIG */
	border-left: 1px solid #ffffff; /* by jade  */
	}	

div#dropMenu ul.level2 {
	top: 2.17em; 
	background:#4f4f4f;
	z-index:1000;
	left:0; /* by jade */
	}

/*
div#dropMenu li a.noLine {
	padding-right:2em;
	border:none;
	} */

[Woodymon]

I have learned to take things one step at a time, especially when I am learning something new ;-)

When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.

So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.

But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?

Thanks for any recommends,
Woody

[jettrue]

I have learned to take things one step at a time, especially when I am learning something new ;-)

When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.

So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.

But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?

Thanks for any recommends,
Woody

No, changing em's to px's will help your resizing issues. Because if padding is in em's then as font size increases, the padding increases. IE's default font size is larger than firefox's, so it will wrap first.

The most important thing to adjust is this section:
padding: .6em 2em .6em 2em;

The 2em's are the left and right padding. Change that to px's, then the widths won't resize.

If the full menu width is in em's, then the full menu will resize with font size as well.

The rest of the em's you can probably leave alone.

[CES]

OK, sorry for nor getting back sooner woody.

Here are my files:

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*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:#D5D5D5;}
*/
	
#dropMenuWrapper {
	background: url(../images/dropmenu.gif) 100% 100% repeat-x;
/*background: rgb(79,79,79);*/
  /*border-top:0px solid #fff;*/
  width:100%;
	height:2.17em;
	margin:0;
	font-size:1em;
	}
	
div#dropMenu {
  	width:65em;
  	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;
	}
	
div#dropMenu ul.level1 {
	width:65em; 
	margin:0 auto; 
	text-align:center;
	background: url(../images/dropmenu.gif) 100% 100% repeat-x;
/*	background: rgb(79,79,79);*/
  height:2.17em;
	z-index:1000;
	}
	
div#dropMenu li a.lineright {border-right:1px solid #ffffff;}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% repeat-x;} */ 
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% repeat-x;} */
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 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {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;}
/*div#dropMenu li.submenu li.submenu {background: #737373;}*/
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 100% 50% no-repeat;}*/

And:

<!-- menu area -->

<div id="dropMenuWrapper">
  <div id="dropMenu">
    <ul class="level1">
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_SPECIALS); ?>"><?php echo HEADER_TITLE_SPECIALS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo HEADER_TITLE_SEARCH; ?></a></li>
        </ul>
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
        <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>
      
      </li>
      <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 (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
		  <?php } ?>
		  <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
        </ul>
      </li>
      <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
      <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 class="lineright" 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="lineright" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
      <?php } ?>
    </ul>
  </div>
</div>
<div class="clearBoth"></div>

If anybody looks at this and thinks "what a plonker Craig, you should have done this" please go ahead and tell me.

Sorry I can't remember what alterations I did and what they were for woody. I hope this helps anyhow.

Craig

[Woodymon]

Just a lot of random trial and error. Two steps forward one step back.

Now in IE6 menu stays on one line and no wrapping and no resizing, when browser type size changed.

And now in Firefox the menu stays on one line and never wraps.

But when FF browser type size is changed the menu increases/decreases in size.

Understanding the relevant diffs in FF and IE6 is my main issue now.

Some more trial and error to do. And also test in IE7 and Safari and Opera and...

Thanks for all the suggestions.

Woody