CSS Dropdown menu for the header- With Categories!

**jettrue** · 23 Aug 2007, 04:20 AM

Originally Posted by 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

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** · 23 Aug 2007, 09:18 AM

OK, sorry for nor getting back sooner woody.

Here are my files:

Code:

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&#37; 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:

Code:

<!-- 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** · 23 Aug 2007, 11:08 AM

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

**jettrue** · 23 Aug 2007, 12:21 PM

Originally Posted by 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

You may never be able to get all browsers look exactly the same.

Will your site be online soon? LOL, that would help a ton.

What's your set width for dropMenuWrapper and dropMenu?

What's your font size for the menu?

**Woodymon** · 23 Aug 2007, 08:25 PM

Originally Posted by jettrue

What's your set width for dropMenuWrapper and dropMenu? What's your font size for the menu?

The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!

Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?

Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).

Woody

Code:

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 5px; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 11px; /* ORIG */
	padding-bottom: 1px;  
	}
	
div#dropMenu {
	width: 840px; 
	margin: 0 auto; /* ORIG */
	text-align: center; /* ORIG */
	z-index: 1000; /* ORIG */
	position: relative; /* ORIG */
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li { 
	position: relative; /* ORIG */
	list-style: none; /* ORIG */
	margin: 0; /* ORIG */
	float: left; /* ORIG */
	line-height: 1em; /* ORIG */
	width: 16.667%; /* width added by jade */
	background: #A5B7E9; /*NOT IN ORIG */
	}
	
div#dropMenu ul.level1 {
	width: 70em; /* ORIG  NOT ME */
	margin: 0 auto; /* ORIG  NOT ME */
	text-align: center; /* ORIG */
	height: 2.17em; /* ORIG */
	z-index: 1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	padding: 5px 0 5px 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: 3px;
	background: #4f4f4f;
	z-index: 1000;
	left: 0; /* recommend by jade */
	}

**icyorchid** · 23 Aug 2007, 09:14 PM

Thanks :)

I would love to have my site look something like this one
http://makeupconnection.com/

I don't know how to get rid of the categories on the side panel of mine http://www.the-unique-boutique.com and
I don't know how to add the other links they
(http://makeupconnection.com/) have at the top :)

If you can help, please help me. Down on hands and knees begging :)

Thanks
Sandra

**jettrue** · 23 Aug 2007, 10:32 PM

Originally Posted by Woodymon

The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!

Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?

Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).

Woody

Code:

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 5px; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 11px; /* ORIG */
	padding-bottom: 1px;  
	}
	
div#dropMenu {
	width: 840px; 
	margin: 0 auto; /* ORIG */
	text-align: center; /* ORIG */
	z-index: 1000; /* ORIG */
	position: relative; /* ORIG */
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li { 
	position: relative; /* ORIG */
	list-style: none; /* ORIG */
	margin: 0; /* ORIG */
	float: left; /* ORIG */
	line-height: 1em; /* ORIG */
	width: 16.667%; /* width added by jade */
	background: #A5B7E9; /*NOT IN ORIG */
	}
	
div#dropMenu ul.level1 {
	width: 70em; /* ORIG  NOT ME */
	margin: 0 auto; /* ORIG  NOT ME */
	text-align: center; /* ORIG */
	height: 2.17em; /* ORIG */
	z-index: 1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	padding: 5px 0 5px 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: 3px;
	background: #4f4f4f;
	z-index: 1000;
	left: 0; /* recommend by jade */
	}

Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).

**jettrue** · 23 Aug 2007, 10:38 PM

Originally Posted by icyorchid

Thanks :)

I would love to have my site look something like this one
http://makeupconnection.com/

I don't know how to get rid of the categories on the side panel of mine http://www.the-unique-boutique.com and
I don't know how to add the other links they
(http://makeupconnection.com/) have at the top :)

If you can help, please help me. Down on hands and knees begging :)

Thanks
Sandra

I'm not sure what you're asking for as far as the top of the site. That's a fairly complicated graphical drop down menu and the extra links "at the top" also. I have no quick solution to get your site looking like that one. You can examine their header_menu.css to get an idea on how it was done.

To get rid of the side panel, just turn the sidebox off in "tools", "Layout Boxes Controller".

**icyorchid** · 24 Aug 2007, 02:04 AM

Originally Posted by jettrue

I'm not sure what you're asking for as far as the top of the site. That's a fairly complicated graphical drop down menu and the extra links "at the top" also. I have no quick solution to get your site looking like that one. You can examine their header_menu.css to get an idea on how it was done.

To get rid of the side panel, just turn the sidebox off in "tools", "Layout Boxes Controller".

I feel like a dope! I didn't think of turning off the sidebox. lol
I was trying to close out the categories. lol Thank you for letting me know where that was. lol

As far as the other links, I guess I can do without.

I wish I knew how to do these templates. Is there like a school or something that is free of reasonably priced that I can join online?

Thanks
Sandra

**jettrue** · 24 Aug 2007, 03:06 AM

Originally Posted by icyorchid

I feel like a dope! I didn't think of turning off the sidebox. lol
I was trying to close out the categories. lol Thank you for letting me know where that was. lol

As far as the other links, I guess I can do without.

I wish I knew how to do these templates. Is there like a school or something that is free of reasonably priced that I can join online?

Thanks
Sandra

I'm just not fully sure what you're looking for, I'd be happy to help. As for other links, you can turn on ezpages for the header, and those would show up just above your drop down menu.

Are you having problems with your "HOME" and "LOGIN" links up top? they seem kind of squished off to the right there.

I don't know of any free schools online, sorry....

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

Thread Tools

Search Thread

Display

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

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

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

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

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

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

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

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

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

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

Similar Threads

Categories dropdown menu/css

HIde categories mod with css dropdown menu

How to use ezpages/categories as dropdown menu in the header?

whats wrong with this css for my dropdown menu?

Header Dropdown Menu (CSS) Without the Dropdown???

Bookmarks

Bookmarks

Posting Permissions