Multi-column children (a.k.a. mega-menu) support

I have no idea what the code would need to be to make this happen. Unless there is some fancy CSS trick, you will probably need to either use PHP with the theme function to output the children in a table or use JS to do some magic to create the effect.

someone included some code that does this in a patch for adding some classes. It doesn't really belong in that patch but if anyone wants to find some code to point them in the right direction, give it a look. #301247: add classes 'first', 'last', 'even', 'odd'

I'm not sure how to add this to NM right now, not from code per se, but how would we create a UI for a user to be able to set it up? If anyone wants a stab at a patch, I'm willing to look at it, but not a patch I will get time to work on myself.

Hey Addison,

I am working with a site that has 3,000+ pages. This presents a navigation challenge similar to the one zdean presents above. We have one topic that has 65 sub-topics organized in 5 groups. We have another area that has a topic per day of the year -- 366 in total broken down by month. It is possible to create navigation that changes the current page to a page of links for selection (for example, create a January page with 30 links). This doesn't seem to be the correct solution for a user that is browsing for information -- too much page swapping.

Here is an example of the type of solution we are looking for. I hate to use this specific example but it is handy. Please see the "All Products" link at the top of http://www.microsoft.com -- also attached here. Do you believe this is within the scope of Nice Menus? Perhaps a joint venture is possible? If not, are you aware of another module/solution to obtain this effect?

Thanks for considering this Addison!! Greg

Just look here:
http://www.cssplay.co.uk/menus/drop-table.html
http://www.cssplay.co.uk/menus/multi-column.html
http://www.cssplay.co.uk/menus/drop_lists.html

I think it would be the solution we all need. Pure css, no java. I experimented with this sort of things on a static site and know that it is even possible to make the multicolumn menu nested (the next level can be a balloon with a few links or a scrolling menu) -- pure css again! It is quite easy. Pity I am a beginner to drupal otherwise I think I would be able to write the much needed module...

Subscribing.
Just another example of a website which makes use of this technique: http://www.otto.de/
Maybe it could be configurable in the following way:
- first level of menu keeps top navigation
- second level keeps columns (configurable)
- third level keeps navigation items

+---------+
| TopNav1 | TopNav2 | TopNav3         <- first Level (1)
|         +------------------------+
|                                  |
|  Column1     Column2    Column3  |  <- second level (2)
|  - Nav1   |  - Nav4   | - Nav6   |  <- third level (3)
|  - Nav2   |  - Nav5   | - Nav7   |
|  - Nav3   |           |          |
+-----------+-----------+----------+

Just add some theme specific css. ;-)

Could be a seperate module as well.

What do you think? I don't know much about NM, so this could be naive. :)

cheers, Ronald

cool. i remember rockethemes has this feature their joomla template.

yeah... It's very useful ...

Please help ...

Thank very much ...

Hey All,

It is possible to implement "multi-column children" under Nice Menus. Please see this page:

http://www.raystedman.org/n

This page supports a two level menu. The first level us an unordered list (Bible Overview ...). The second level is also an unordered list to create the subnav menus. We converted the subnav unordered list into a table and added some css to fill in the gaps. The result is just what we were looking for our primary navigation.

Thanks to Nice Menus for providing the base function to make this possible!

Thanks Addison!

Could you give a little more insight in how you did this in nice menus?
Many thanks

GregSims, can you be more detailed on how it was done?

BTW, whitehouse.gov which was recently lauched with Drupal has 2 column primary menu. Are they using nice_menus? What are the alternatives?

Subscribing

subscribing

interesting for me too

This would be a very useful feature for me too

subscribe

I think I've implemented what you want, see: http://drupal.org/node/612214

I just put up a live test site using it, http://test.animeigo.com/

No doubt a bit creaky, but tell me what you think.

WhiteHouse.gov's HTML shows that their multi-column child menus are actually separate UL lists. In other words, the entire list of children for a given parent is divided into separate UL tags - 3 columns means the single full list is divided programmatically into 3 ULs. This requires theming of the PHP in addition to theming of the CSS.

For most people who don't want to "mess with PHP" or have trouble theming the menu "the Drupal way" one could nearly do the same thing with jquery, I believe. Use it to count the number of total list items in a child list, then add a certain class name to the first 3rd of the list items (or wrap them in an invisible jquery UL), another class to the second 3rd and one more class to the final 3rd of the items. Then you could use CSS to style the single UL as 3 different columns by floating the list items' various classes like you would float columns in a layout. This approach is probably more complex than simply "messing with PHP" though... :)

I would love to see a tutorial on this....

WhiteHouse.gov's HTML shows that their multi-column child menus are actually separate UL lists. In other words, the entire list of children for a given parent is divided into separate UL tags - 3 columns means the single full list is divided programmatically into 3 ULs. This requires theming of the PHP in addition to theming of the CSS.

For most people who don't want to "mess with PHP" or have trouble theming the menu "the Drupal way" one could nearly do the same thing with jquery, I believe. Use it to count the number of total list items in a child list, then add a certain class name to the first 3rd of the list items (or wrap them in an invisible jquery UL), another class to the second 3rd and one more class to the final 3rd of the items. Then you could use CSS to style the single UL as 3 different columns by floating the list items' various classes like you would float columns in a layout. This approach is probably more complex than simply "messing with PHP" though... :)

Splitting lists with jquery...
http://welcome.totheinter.net/columnizer-jquery-plugin/
http://codeasily.com/jquery/multi-column-list-with-jquery

Just FYI i know this sounds like a plug but you can also "fake" multi-lists. I do this on my site by floating list items and forcing the LI to be a certain width. Then you can create pseudo-columns, however it likely leaves a gap here and there when a floated item is longer than it's neghbor. For me, since I was the owner and developer of my site, it didn't bother me at all to have these occasional gaps. most clients will be more picky though... :)

Example of floated psuedo-columns at the bottom of my services pages, underneath where it says "Projects Using This Service". It's dynamic so if you don't see any gaps, try other service pages.

The URL where we accomplished this has moved. The new URL is:

http://raystedman.org/new

When this site is made public, the site will be located at:

http://raystedman.org/

If you would like to know more about how this was done, please contact Bob at http://mustardseedmedia.com/.

We are thrilled with this implementation. Greg

I'm not inclined to make a patch for this myself, so unless someone else can provide code that can be applied as a patch to NM and be configurable for the end user, I'm going to won't fix this.

People that need multi-column menus or submenus should take a look at the Megamenu project and help with testing.

subscribing....

@klonos WOW! that's exactly what I'm looking for. thank you. I'll test and file bug reports ASAP. though I can't provide code, I can help with UI and patch testing.

There are some other "players" in town. Please check the updated issue summary...

PS: ...new features go to latest version first, then backported.

PPS: ...uploading some screenshots needed for the issue summary update.

...that screenshot in the issue summary needs to be a tad smaller ;)

...updating summary and pointing to other projects implementing mega menu style menus.

...smaller screenshot.