CSS Dropdown menu for the header- With Categories!

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

[jettrue]

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

[chadderuski]

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!

[Get Em Fast]

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.

[chadderuski]

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/l...too/index.html

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

[jettrue]

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!

[chadderuski]

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!

[jettrue]

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.

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