CSS Dropdown menu for the header- With Categories!

jettrue:

With a quick look, I'm not sure precisely, but it may be that it is enclosed in a table.... I didn't design or test it that way, so I'm not sure if it will work inside of a table with the same css?

My bad Jade! I meant that sarcastically. Table layouts are more constrictive than CSS. There was a big push in ZenCart's design to eliminate tables as much as possible. They did a pretty good job!

chadderuski:

My bad Jade! I meant that sarcastically. Table layouts are more constrictive than CSS. There was a big push in ZenCart's design to eliminate tables as much as possible. They did a pretty good job!

I wasn't replying to you chad, I was replying to airtime! LOL!

airtime:

It is in a table on https://www.sierranvweb.com/mtp but in a div on the other link, which is just the menu. Neither works, so I don't think the table is the issue.
Airtime

You have the csshover in the css like this still:

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

My guess that since it's not a zen cart, csshover.htc is not actually in a folder named "includes".

Jade!

I took your lead and now have https://www.royalindustriesinc.com "source ordered" per our discussion above. Everything works pretty well and seems stable. When you check the page without CSS you get the page content first, then side boxes then the drop menu ( and all my endless categories ;P ).

This didn't take long at all. But like you said, some tweaking involved in getting the header to have enough space. I actually used 'margin-top' to push the centercolumn down.

Two things I have noticed. Since I am not using a stretch logo, and have my header a static height, when you zoom I get a bit of space below the menu. Acceptable though.

However! Now that the header is loaded after page content, my logo doesn't get loaded and displayed quickly! This is loaded with the CSS if I remember correctly. If I do an "on load" command on the body element will it get cashed and displayed with the page? I have done this before, but not using CSS to specify images... hmmmm.

As far as making this a core to applezen... I think I must agree with you. There is a fair bit of mod work here and I think you need to be comfortable with playing with the CSS and not afraid to change the php. But, you could certainly have an FAQ with the mod that answered your common questions, and maybe also one for going source ordered.

Anyway, I am REALLY happy to get page content first! Excited to see what happens with my page ranks now.

jettrue:

You have the csshover in the css like this still:

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

My guess that since it's not a zen cart, csshover.htc is not actually in a folder named "includes".

That did the trick. Thanks!

JETTRUE, hello again, I am using your template Apple and I noticed that you use this css dropdown menu within it. I've got information from the site where I bought translated ZC, that this css dropdown menu extension is used to hack the sites and they really strong suggest not to use it. They told that
Image Handler 2
CSS Horizontal DropDownMenu
Alternative Header 1.1a
Automatic Login
my be used to take control over my site via hackers, they reffer that www.secunia.com check it. Would you comment this as you are the 'producer'? Source: www.zencart.com.pl

Hi everyone,

Loving the work on content shifting for search engines! Has anyone had any luck finding a solution to the IE7 Sub menu hanging around after leaving it and returning to the base menu?

http://www.musicservices.co.nz/

thanks

braad:

JETTRUE, hello again, I am using your template Apple and I noticed that you use this css dropdown menu within it. I've got information from the site where I bought translated ZC, that this css dropdown menu extension is used to hack the sites and they really strong suggest not to use it. They told that
Image Handler 2
CSS Horizontal DropDownMenu
Alternative Header 1.1a
Automatic Login
my be used to take control over my site via hackers, they reffer that www.secunia.com check it. Would you comment this as you are the 'producer'? Source: www.zencart.com.pl

Very interesting. This is the first I've heard of this. I'm also surprised that they single out "CSS Horizontal DropDownMenu", when it is based off of the same files that are in the sidebox CSS menu, and the categories only version uses most of the same files as well. I'd love to know what they feel is the issue.

hitch:

Hi everyone,

Loving the work on content shifting for search engines! Has anyone had any luck finding a solution to the IE7 Sub menu hanging around after leaving it and returning to the base menu?

http://www.musicservices.co.nz/

thanks
No, sorry!

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.:smile:

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

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

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.

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

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

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

http://www.zen-cart.com/forum/showthread.php?p=348161&highlight=lightbox#post348161

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

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

Get Em Fast:

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.:smile:

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

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

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 . '_');

chadderuski:

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

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.

Get Em Fast:

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.

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