CSS Dropdown menu for the header- With Categories!

[birdoasis]

jtschrade,

The menu should be dynamic, which means that the dropdown menu should be built as you add categories without you having to edit anything else.

Is it not working that way?

[jettrue]

jtschrade,

The menu should be dynamic, which means that the dropdown menu should be built as you add categories without you having to edit anything else.

Is it not working that way?

He's asking that ONLY the categories show at the top. He would like the categories to be on the top level, vs. HOME CATEGORIES INFORMATION CONTACT US MY ACCOUNT SHOPPING CART.

Which I think can be done, it will just take a bit of adjusting. jtschrade, i'll look into this more soon.

[jtschrade]

That is what I want. Basically, I want it to be arranged like the default setting where each category name is listed horizontally under the banner; but I want it to be a drop down where as you pass over a category the drop down shows the subcategories. Possibly combining the code from those two areas would work. But again, I'm a beginner.

[rainthebat]

Thank you very much for this CSS Dropdown menu Jade True.
Quite a beautiful piece of work!

It works perfectly in Internet Explorer (probably by far the most popular browser the customers will be using anyways) but in Firefox there is a problem that occurs only when the font is enlarged twice beyond the normal size (truthfully I'm not sure if anyone wants their fonts this big, but perhaps). What seems to happen is that a gap between the menu and submenu makes it just big enough so the submenu can't actually be reached for clicking the link. Really no big-deal seeing as how only a small percentage of visitors would ever experience this, and they still have other ways to navigate. Here is a site ( http://www.fabricstashinc.com/cart ) where it happens, but I think it happens on any site with the menu.

Many thanks for this contribution!

[Woodymon]

He's asking that ONLY the categories show at the top. He would like the categories to be on the top level, vs. HOME CATEGORIES INFORMATION CONTACT US MY ACCOUNT SHOPPING CART.

Which I think can be done, it will just take a bit of adjusting. jtschrade, i'll look into this more soon.

Possibly can build the category dropdowns upon the Categories Tabs feature integrated into recent Zen Cart versions.

Admin > Configuration > Layout Settings > Categories-Tabs Menu > ON/OFF

However, displaying two different horizontal menu bars, one on top of the other, each with drop downs could prove problematic.

And the number of categories in a shop is dynamic, so designing the horizontal categories menu bar looks good when there is only two categories vs. ten or twenty or more top level categories and when to set the categories list to wrap, sounds like a tough job. And there are the subcategories to deal with.

[jettrue]

Thank you very much for this CSS Dropdown menu Jade True.
Quite a beautiful piece of work!

It works perfectly in Internet Explorer (probably by far the most popular browser the customers will be using anyways) but in Firefox there is a problem that occurs only when the font is enlarged twice beyond the normal size (truthfully I'm not sure if anyone wants their fonts this big, but perhaps). What seems to happen is that a gap between the menu and submenu makes it just big enough so the submenu can't actually be reached for clicking the link. Really no big-deal seeing as how only a small percentage of visitors would ever experience this, and they still have other ways to navigate. Here is a site ( http://www.fabricstashinc.com/cart ) where it happens, but I think it happens on any site with the menu.

Many thanks for this contribution!

You're welcome.

In my original design of this dropdown menu, I did everything in em's so that font resizing wouldn't be an issue. I did this as part of my Apple Zen template:
http://www.zencart137.jadetrue.com/

You'll notice the same issue doesn't occur there.

When I put the download together of the header menu only, I changed the em's to px's to avoid issues with people who were using a fixed width site.

What you can do is, open up the stylesheet_header_menu.css and change the first two instances of "25px" to "2.17em"

Then change div#dropMenu li a to this:
div#dropMenu li a {display: block; padding: .6em 25px ;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}

[rainthebat]

Thanks Jade,
I see how changing the height from pixels to ems would allow this menu to function perfectly when the text size is increased.

[Woodymon]

Open up your stylesheet_lightbox.css and add a zero to the end of all of the z-index's. So if it says "z-index:10", change it to "z-index:100"
If it says "z-index:90", change to "z-index:900", etc.

Hi Jade,

Finally installed your new the header dropdown menu mod on Zen Cart v.1.37. Very nice and thanks

I also have Zen Lightbox installed and I too observed same issue of menu bar showing over Lightbox image (in both Firefox and IE). Then followed your CSS edit instructions above and the menu now appears behind the image, which is much better. Thanks.

However would you have any CSS tricks up your sleeve on how to "completely" hide the header menu on the lightbox image pages?

Also I note after changing the CSS above to display the the menu bar behind the Zen Lightbox image, the menu bar links and dropdowns are still "live" and clickable in IE, but not in Firefox.

Woody

[jettrue]

Hi Jade,

Finally installed your new the header dropdown menu mod on Zen Cart v.1.37. Very nice and thanks

I also have Zen Lightbox installed and I too observed same issue of menu bar showing over Lightbox image (in both Firefox and IE). Then followed your CSS edit instructions above and the menu now appears behind the image, which is much better. Thanks.

However would you have any CSS tricks up your sleeve on how to "completely" hide the header menu on the lightbox image pages?

Also I note after changing the CSS above to display the the menu bar behind the Zen Lightbox image, the menu bar links and dropdowns are still "live" and clickable in IE, but not in Firefox.

Woody

No, I wouldn't know how to "completely" hide it, but changing #overlay's z-index to 1000 will help hide it like the rest of the site. Perhaps that will help it from still functioning as well.

[shackle]

to fix the Lightbox issue.....

In tpl_header.php add this code:

   <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>

Just add: <div class="flash"> menu code here. </div> around the menu code.

This will fix the lightbox issue at least it does for me. You get the same issue with flash objects.

Ps. make sure you have the latest lightbox