CSS Dropdown menu for the header- With Categories!

Hey Jade!

I have an idea to solve my LOOOOOOONG sub-categories problem (meaning a lot of mouse scrolling on the page).

What if we were able to set a max number of items to display in a fly out menu so that the scroll bar would attach itself to the side of that menu when it is too long??

I am thinking this would be doable by setting a height to the flyout menu somewhere in the css.

What do you think?

chadderuski:

Hey Jade!

I have an idea to solve my LOOOOOOONG sub-categories problem (meaning a lot of mouse scrolling on the page).

What if we were able to set a max number of items to display in a fly out menu so that the scroll bar would attach itself to the side of that menu when it is too long??

I am thinking this would be doable by setting a height to the flyout menu somewhere in the css.

What do you think?

I don't know that a css menu would make a scroll bar. Its just css. My advice to you would be to either try and condense categories more, or set it so that only the main categories drop down. To do that, simply open up includes/classes/categories_ul_generator.php and change $max_level to 1.

chadderuski:

A different question:

I noticed in IE6 (and probably IE5 as well) that there is a problem with the menu with pages that have a <select> active .... meaning the select box shows through the menu.

I was reading about a solution to this over at Brainjar:

http://www.brainjar.com/dhtml/menubar/default11.asp

But egaads, talk about a chore!

This article also address this issue, and seems a bit less intensive:

http://www.hiveminds.co.uk/node/3225

jettrue:

I don't know that a css menu would make a scroll bar. Its just css. My advice to you would be to either try and condense categories more, or set it so that only the main categories drop down. To do that, simply open up includes/classes/categories_ul_generator.php and change $max_level to 1.

Hi Jade! I worked on this a bit, and it is 'sort-of' possible:

div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f;max-height:400px; overflow:auto}

by setting a max-height and overflow you get the scroll bar.

However, this only works on one sub-level, and they don't fly out... at least I haven't discovered a way to do that... once the scroll bar shows. It seems you can have one or the other but not both. The scroll bar kills the subsequent sub-menus.

Yes, I am condensing categories to make product depth more reasonable. I didn't supervise the initial data entry, so you can image the mess I inherited!

chadderuski:

Hi Jade! I worked on this a bit, and it is 'sort-of' possible:

div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f;max-height:400px; overflow:auto}

by setting a max-height and overflow you get the scroll bar.

However, this only works on one sub-level, and they don't fly out... at least I haven't discovered a way to do that... once the scroll bar shows. It seems you can have one or the other but not both. The scroll bar kills the subsequent sub-menus.

Yes, I am condensing categories to make product depth more reasonable. I didn't supervise the initial data entry, so you can image the mess I inherited!

You're right, Chad.......I've been working on this, also, as it seemed like a very good idea (especially after looking at your long list), and I've ran into the same problem.......it's EITHER flyout, OR scroll, but not both. gotta be a fix, though. Just haven't found it, yet.

Well, there are some java-based solutions, but that is a real departure from using a pure CSS design.

Jade's horizontal drop menu is GREAT! I have no complaints. But I like to fiddle and tweak. Will give the IFRAME solution a try when I can as this bug is evident even in firefox.

If you want a CHALLENGE, here you go!

Find a way to source-order the horizontal menu so that it lists AFTER the main page content, but displays at the top properly. Why do this? With a large number of categories and subcategories, the menu is quite large. This pushes the page content (what you want the spiders to read) way down on the page. Your page content may actually never be read, and <google> will likely punish you for all the duplicate (menu) content.

Ruthsarian discusses this here:

http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html

But even he doesn't treat the horizontal menu.... just the side menu.

chadderuski:

If you want a CHALLENGE, here you go!

Find a way to source-order the horizontal menu so that it lists AFTER the main page content, but displays at the top properly. Why do this? With a large number of categories and subcategories, the menu is quite large. This pushes the page content (what you want the spiders to read) way down on the page. Your page content may actually never be read, and <google> will likely punish you for all the duplicate (menu) content.

At first my reply was going to be: "Did I say I wanted a challenge?", LOL!

But really, I was remiss in thinking about this in my original design. The header, I could have left the way it is with a stock zen cart install, but I really shouldn't have put the sidebox content before the main content. It doesn't really matter which comes first in my design... I made sidebox come first, then just floated both the sidebox and the content to the right, but honestly it's just as simple to have the content first, then the sidebox second, and float them to the left.

It's also QUITE simple to get the ENTIRE header's source at the end of the page, while having it display at the top. This would require some hacking into tpl_header.php and tpl_footer.php, though in reality I've hacked them up pretty good already. :) Think I ought to update the template to accomplish these things? So basically the SOURCE of the page is in this order: breadcrumbs, then content, then sideboxes, then header, while having the site look exactly the same? I'd love input on this... exciting!

jettrue:

At first my reply was going to be: "Did I say I wanted a challenge?", LOL!

Well, I was kinda poking at Get Em Fast!

It's also QUITE simple to get the ENTIRE header's source at the end of the page, while having it display at the top. This would require some hacking into tpl_header.php and tpl_footer.php, though in reality I've hacked them up pretty good already. :) Think I ought to update the template to accomplish these things? So basically the SOURCE of the page is in this order: breadcrumbs, then content, then sideboxes, then header, while having the site look exactly the same? I'd love input on this... exciting!

THIS order: breadcrumbs, then content, then sideboxes, then header (with your drop menu)...

would be great from a Search Engine Optimization (SEO) point of view. I am a real novice at SEO, but in my readings, this is the best for getting good spider support. Spiders don't see the css, so all they see is the looooong (achem, my site) list of links. This is duplicated on EVERY page. Result? Spider thinks your a link site with endless duplicate content and penalizes you. Use Web Developer with Firefox. Disable all CSS and you'll see what I mean.

Source ordering the side boxes (and menu if any) is relatively easy as you pointed out, but getting the header's drop menu at the bottom? Would love to see your solution to this.

Cool stuff!

chadderuski:

Well, I was kinda poking at Get Em Fast!

THIS order: breadcrumbs, then content, then sideboxes, then header (with your drop menu)...

would be great from a Search Engine Optimization (SEO) point of view. I am a real novice at SEO, but in my readings, this is the best for getting good spider support. Spiders don't see the css, so all they see is the looooong (achem, my site) list of links. This is duplicated on EVERY page. Result? Spider thinks your a link site with endless duplicate content and penalizes you. Use Web Developer with Firefox. Disable all CSS and you'll see what I mean.

Source ordering the side boxes (and menu if any) is relatively easy as you pointed out, but getting the header's drop menu at the bottom? Would love to see your solution to this.

Cool stuff!

Heh heh, well, I forgot I wasn't replying to my Apple Zen thread. I get mixed up sometimes. But you happen to use the Apple Zen, right? (If you're referring to http://royalindustriesinc.com/) Though modified a good bit? I'm not sure if my method would work with your site right out of the box. You can see what I've done here:
http://www.zencart137.jadetrue.com

The entire header of the above site is enclosed in a <div> (including the drop down menu), so I simply moved that entire <div> down to the bottom of tpl_main_page.php, before the closing body tag. Then I absolutely positioned that div, like this:

#headerWrapper {position:absolute;top:0;}

Then, I set the #mainWrapper to be relatively positioned, and set it so that it started below the absolute one... I had to play around till I got the correct height:

#mainWrapper {
        position:relative;
	top:16em;
	}

So now it goes:
breadcrumbs, then content, then sideboxes, then header (with the drop menu).

I also readjusted so the sideboxes are after the content.

This could be done with your site too, just with some tweaks. :cool:

So, after bugging both jettrue and Get Em Fast (thanks for answering my questions so promptly you two) about their CSS menu mods/contribs, I've figured out a way to combine the two. Now just my categories appear as items in a CSS dropdown menu across the top of my header.

HOWEVER, now I'm having issues centering the menu itself within the header. I know I can patch it quick by tweaking my margins, making one larger than the other, but would prefer not to. If a user would increase their font size, the quick fix would throw everything out of whack.

I tried using a combo of "text-align=center" for the body and "margin: 0 auto; width: XXXpx;" for the menu wrapper in my style-sheet, but it isn't working. I think the "display: block" and/or "float:left" from the menu is negating the effect.

Has anyone successfully centered this menu in the header? Possible solutions?

creative:

So, after bugging both jettrue and Get Em Fast (thanks for answering my questions so promptly you two) about their CSS menu mods/contribs, I've figured out a way to combine the two. Now just my categories appear as items in a CSS dropdown menu across the top of my header.

HOWEVER, now I'm having issues centering the menu itself within the header. I know I can patch it quick by tweaking my margins, making one larger than the other, but would prefer not to. If a user would increase their font size, the quick fix would throw everything out of whack.

I tried using a combo of "text-align=center" for the body and "margin: 0 auto; width: XXXpx;" for the menu wrapper in my style-sheet, but it isn't working. I think the "display: block" and/or "float:left" from the menu is negating the effect.

Has anyone successfully centered this menu in the header? Possible solutions?

Link please?

Would the style sheets and/or php files help? I am unable to supply a link since the site has not been released to the public.

creative:

Would the style sheets and/or php files help? I am unable to supply a link since the site has not been released to the public.

It's a lot easier to do if I could see. You could PM the link if that would work. Did you try this:

#divName {
text-align:center;
margin:0 auto;
}

Will do. Thanks.

jettrue:

Heh heh, well, I forgot I wasn't replying to my Apple Zen thread. I get mixed up sometimes. But you happen to use the Apple Zen, right? (If you're referring to http://royalindustriesinc.com/) Though modified a good bit? I'm not sure if my method would work with your site right out of the box. You can see what I've done here:
http://www.zencart137.jadetrue.com

The entire header of the above site is enclosed in a <div> (including the drop down menu), so I simply moved that entire <div> down to the bottom of tpl_main_page.php, before the closing body tag. Then I absolutely positioned that div, like this:

#headerWrapper {position:absolute;top:0;}

> 
> Then, I set the #mainWrapper to be relatively positioned, and set it so that it started below the absolute one... I had to play around till I got the correct height:
> 
> ```
#mainWrapper {
        position:relative;
	top:16em;
	}

So now it goes:
breadcrumbs, then content, then sideboxes, then header (with the drop menu).

I also readjusted so the sideboxes are after the content.

This could be done with your site too, just with some tweaks. :cool:

Jade! That is awesome! Looks very good without the CSS. Page content is at top, and then new items... which is cool cause the spiders will think new content and visit more often.

I will have to see if I can get Royal's site to meet yours. Thanks for taking on my challenge! And be sure to say in your mod that it is source ordered ... to get page content at top of page!

Will be really interested to see how this affect our page rank once I get it working!

Chaddro.

chadderuski:

Jade! That is awesome! Looks very good without the CSS. Page content is at top, and then new items... which is cool cause the spiders will think new content and visit more often.

I will have to see if I can get Royal's site to meet yours. Thanks for taking on my challenge! And be sure to say in your mod that it is source ordered ... to get page content at top of page!

Will be really interested to see how this affect our page rank once I get it working!

Chaddro.

Thanks Chad,

The only issue, that is partially dissuading me from integrating this into the download, is that the top:16em will be different for just about every user. Depending on their logo height, whether or not they use the category tabs or ezpages in the header, etc. Just another thing I have to answer over and over again cause people don't read the readme.txt. :laugh: Well, what's one more thing, anyway? This new layout is also very unforgiving, because if there's anything wrong, like a closing div missing, it gets very unhappy. Though it helped me realize an error in one of my contributions. :smartalec:

Though I was debating taming this down a bit, by trying to keep the logo section up top in the source, and just have the category tabs, ezpages section, and drop down menu at the bottom of the source. What do you think?

This is a great contribution. I've it installed on a ZC site just fine. Had to change the .htaccess file vs the recommended additions in order to make it work in IE5, but working great now.

I've now installed it on a test site using phpwebsite, using a basic unordered list. It works fine in mozilla and ie7 but not ie6. I've installed the csshover.htc file as well. See: https://www.sierranvweb.com/mtp for the menu in place in the site and http://www.sierranvweb.com/mtp/body_files/header.html# for just the menu. Any help, much appreciated.
thanks,
Airtime

jettrue:

Thanks Chad,

The only issue, that is partially dissuading me from integrating this into the download, is that the top:16em will be different for just about every user. Depending on their logo height, whether or not they use the category tabs or ezpages in the header, etc. Just another thing I have to answer over and over again cause people don't read the readme.txt. :laugh: Well, what's one more thing, anyway? This new layout is also very unforgiving, because if there's anything wrong, like a closing div missing, it gets very unhappy. Though it helped me realize an error in one of my contributions. :smartalec:

Though I was debating taming this down a bit, by trying to keep the logo section up top in the source, and just have the category tabs, ezpages section, and drop down menu at the bottom of the source. What do you think?

Yes, I see what you mean. Perhaps not having the drop menu in the same div will solve that, and leaving the header more like it was. But don't minimize your accomplishment. Great solution, and goes to show the strength of CSS. Do THAT with a table!

Like I said, I have to get this working for Royal and see what happens with page rank.

airtime:

This is a great contribution. I've it installed on a ZC site just fine. Had to change the .htaccess file vs the recommended additions in order to make it work in IE5, but working great now.

I've now installed it on a test site using phpwebsite, using a basic unordered list. It works fine in mozilla and ie7 but not ie6. I've installed the csshover.htc file as well. See: https://www.sierranvweb.com/mtp for the menu in place in the site and http://www.sierranvweb.com/mtp/body_files/header.html# for just the menu. Any help, much appreciated.
thanks,
Airtime

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?

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?

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