CSS Dropdown menu for the header- With Categories!

[pap1723]

Hello, first, thank you for the Add-on it is great. I have a couple of issues I need to fix with it though.

http://www.greatgolfdepot.com

I saw someone mention something about Internet Explorer. In IE the menus do not come down aligned, but they are off centered to the right slightly. It works great in Firefox though.

My second problem, which is a little worse, is the area directly to the right of the Shopping Cart tab. There is extra space there that I cannot figure out how to remove. I tried even adding margin-right: -10px; to the CSS and it won't move. Is there something I am doing wrong or missing?

Thanks!
Dan Paplaczyk
http://www.GreatGolfDepot.com

[jettrue]

Hello, first, thank you for the Add-on it is great. I have a couple of issues I need to fix with it though.

http://www.greatgolfdepot.com

I saw someone mention something about Internet Explorer. In IE the menus do not come down aligned, but they are off centered to the right slightly. It works great in Firefox though.

My second problem, which is a little worse, is the area directly to the right of the Shopping Cart tab. There is extra space there that I cannot figure out how to remove. I tried even adding margin-right: -10px; to the CSS and it won't move. Is there something I am doing wrong or missing?

Thanks!
Dan Paplaczyk
http://www.GreatGolfDepot.com

Since you want your menu to fill up all the way from left to right, I would suggest using percentages for the widths of each menu item. This is because the menu was designed to have a right-side space, so that when people enlarge the font, the menu doesn't end up wrapping into two lines. But making the menu items a percentage, it won't wrap into two lines.

So, first, you need to change div#dropMenu li to this:

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

Then change div#dropMenu li a to this:

div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#005f00; text-align:center; border-right:1px solid #005f00; border-left:1px solid #005f00;}

Then change div#dropMenu ul.level2 to this:
div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;}

div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;left:0;}

And I think the last section I just posted will help with your IE problem as well.

[pap1723]

Thank you very much for your help! That worked like a charm.

I just ran across another question...I have the Lightbox module installed so that when you click on the large image to view it pops up in a lightbox. The menu is now staying over the top of the image box when it should be pushed behind it also. Any help would be great!

Thanks,
Dan Paplaczyk
http://www.GreatGolfDepot.com

[jettrue]

Thank you very much for your help! That worked like a charm.

I just ran across another question...I have the Lightbox module installed so that when you click on the large image to view it pops up in a lightbox. The menu is now staying over the top of the image box when it should be pushed behind it also. Any help would be great!

Thanks,
Dan Paplaczyk
http://www.GreatGolfDepot.com

This was discussed a bit earlier in this thread, try looking starting around here:

http://www.zen-cart.com/forum/showth...box#post348161

You can also use the "Search this thread" option, and search for "Lightbox" there are a few ways around it.

[chadderuski]

Hi Jade,

Have you had a chance to look into the breadcrumb issues I posted earlier? I spent a couple hours digging through topics, but haven't had much success.

Odd thing: if I remove the &cPath= from the url, the page then re-displays with the full breadcrumb correctly... ???

[chadderuski]

Well, here's what I have (so far) of a scroll menu. The bad thing is, it doesn't include any categories, because, as I said earlier....it's either scroll, or flyout....not both. But, I'm still working on it. Just thought that somebody else might could take what I've got so far, and make it work with flyout. Anybody interested? Hint-Hint Jade.

Get Em Fast: That looks really cool. I don't see a solution to also get fly out because you need to leave the hover area to grab the scroll bar.

Also, do you have a separate support thread for your fly out menu? Time to make YOU sweat a little and let Jade rest for a while

[jettrue]

Hi Jade,

Have you had a chance to look into the breadcrumb issues I posted earlier? I spent a couple hours digging through topics, but haven't had much success.

Odd thing: if I remove the &cPath= from the url, the page then re-displays with the full breadcrumb correctly... ???

Make these changes to includes/classes/categories_ul_generator.php:

Line 64
From
function buildBranch($parent_id, $level = 1, $submenu=false)
to:
function buildBranch($parent_id, $level = 1, $submenu=false, $parent_link='')


Line 70
from:
$category_link = $category_id;
to:
$category_link = $parent_link . $category_id;


Line 103
from:
$result .= $this->buildBranch($category_id, $level+1, $submenu);
to:
$result .= $this->buildBranch($category_id, $level+1, $submenu, $category_link . '_');

[Get Em Fast]

Get Em Fast: That looks really cool. I don't see a solution to also get fly out because you need to leave the hover area to grab the scroll bar.

Also, do you have a separate support thread for your fly out menu? Time to make YOU sweat a little and let Jade rest for a while

Actually, this mod wasn't developed by me, but by DrByte, I think. I just included the rollover images. But seems like after I done that, I inherited it, but there's no support thread for it.

I got the idea from "CSSplay" HERE, and I know it CAN be done......SEE HERE (just found this one), but addapting it to ZC is a little more complicated than I thought....for me, anyway. I'm just learning how to do this menu stuff. But I'm very interested in learning more, and getting this to work with ZC as a new mod. I think a lot of people would like a scrolling flyout menu on their site.....such as you with that loooonngg list of products.
I've just been working on it in my spare time, so it will take me a while, but...I'll get it....eventually.

[jettrue]

Actually, this mod wasn't developed by me, but by DrByte, I think. I just included the rollover images. But seems like after I done that, I inherited it, but there's no support thread for it.

I got the idea from "CSSplay" HERE, and I know it CAN be done......SEE HERE (just found this one), but addapting it to ZC is a little more complicated than I thought....for me, anyway. I'm just learning how to do this menu stuff. But I'm very interested in learning more, and getting this to work with ZC as a new mod. I think a lot of people would like a scrolling flyout menu on their site.....such as you with that loooonngg list of products.
I've just been working on it in my spare time, so it will take me a while, but...I'll get it....eventually.

Ya, the header drop down in this thread was also developed from the vertical one, which was started by Dr. Byte, which was updated by Get Em fast.

By the way the changes I posted one post above can also be applied to the vertical sidebox one, because it also has the breadcrumb issue. Though the line numbers will be different because I modified categories_ul_generator.php.

I don't mind discussion of either mod in this thread, though really all discussion here has been about the horizontal, so there's been no confusion.

[chadderuski]

Jade: Thank you! That worked perfectly. I saw one thread about the flyout menu with a similar fix but hadn't investigated further. You saved me a lot of time! LOL, cross posts!

Get em Fast: Yes, CSSplay is a great site. Been there before, but not recently. Actually, I like to use the "sliding door" method for background images in the menu. It is faster, and you only have one image to download. The only potential drawback it text zoom. One thing to note about Stu's menu is only the final sub menu is scrollable ( no more flyout ) though he does appear to be working on one that works in IE. Would really liked to see that one work without javascript.

Jade, do you prefer to split the thread on the two menus systems?

-cj