Horizontal layout of DHTML menu
yoeld - January 16, 2009 - 07:31
| Project: | DHTML Menu |
| Version: | 7.x-1.x-dev |
| Component: | Localization |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Hello,
I need to use the DHTML menu in horiztontal layout.
My menu will look like this
Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6
When clicking on Item 3 I need it to appear like this:
Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6
Sub 3.1 | Sub 3.2But in practice, what appears is:
Item 1 | Item 2 | Item 3
Sub 3.1 | Sub 3.2 | Item 4 | Item 5 | Item 6Can somebody provide with some hints where to start looking for the solution?
Thanks.
#1
1X
#2
This requires a great lot of CSS and Javascript magic, and I can't do it for now. Patches are welcome, though.
#3
In case this will help someone else along the way, I was able to implement a horizontal DHTML menu using CSS overrides (in theme css, not DHTML menu) targeting menus in the #navbar region in my theme. I've tested in IE 7/8 and FF3.
Basically, float your list items as usual. Then assign a width to collapsed items and make overflow visible. Your 'overflow' is going to be the nested list. Either allow these to drop down vertically, or assign them a defined width (or min-width and max-width). Depending on the the specifics of your theme, you need to specify the width and left/right margins for each level. This may not be the best solution, but it is an easy one. No conflicts with other DHTML-enabled menus, and no extra modules.
My css looks something like:
#navbar ul
{margin: 0 0 0 0; padding: 0; text-align: left}
#navbar li
{float: left; padding: 3px 7px 0 10px}
#navbar ul.menu li.collapsed /* level 1 links */
{ width: 140px; overflow: visible}
#navbar ul.menu li.expanded ul /* level 2 links */
{ width: 600px}
#navbar ul.menu li.expanded ul li.expanded ul /* level 3 links */
{width: 300px}
//UPDATE//
See it in action at http://ohiochristian.edu/trailblazers (click Men's or Women's Sports). The only real caveats I've found are that (1) top-level items must be similar in width. If you combine very short and very long menu items, you'd need to set the width for each item individually. And (2) applying background colors to the expanded menus requires some extra consideration. Otherwise, quick, easy, and effective.
#4
I can add classes to dhtml_menu.css and most menu HTML elements just fine, so this could in fact work. I'll unpostpone it, but it still has to wait for a bundle of other new changes.