Table-based menus for Nice Menus (with code!)

Created on 22 October 2009, over 14 years ago
Updated 2 May 2024, about 2 months ago

Let me start out by saying I'm a total Drupal/PHP newb (though an old-school programmer). In any case, I'm in the process of building a new site for my company in Drupal, and stumbled upon Nice Menus.

While very nice, it lacked a feature I wanted, so I decided to play around and see if I could hack it in, and much to my surprise it turned out to be pretty easy (after realizing I needed to run update.php to get the new hooks to be noticed!)

The new feature is this: 3-level menus using tables for presentation.

What this is useful for is when you have a menu structure where the 2nd-level has only a few items but level 3 has many (in the case of my company, we have a few categories of products, and 20 or so in each category). If a menu like this is implemented using regular popups, it looks ugly as sin and is hard for the user to navigate.

With a table-based menu, the first level looks and works just as it does in a regular Nice Menu, and level 2 and 3 are folded into a table; the level 2 menu items are TH items in the first row, and the level 3 menus (if there are any) are underneath in the next row in TDs. It currently only works in places where a "down" menu would work, but could be fairly easily extended to handle left and right menus as well.

Before I ran into Drupal, I mocked up how these kind of menus might work; you can see that mockup at http://beta.animeigo.com/home.t to give you an idea of the presentation effect I was after.

One thing that is very nice about this menu style is that it naturally handles user-zooming of the font sizes without any hackery; the table naturally goes in just the right place. I've tested it on Mac Safari/Firefox/Opera but haven't had a chance to test on Windows.

In any case, attached is a .zip of the hacked version. As I'm a newb, I have no idea of the etiquette involved in submitting a feature like this (educate me), but I've tried to make it as easy to follow the changes

* All changes have comments with my initials (RJW) in them.
* new CSS in nice_menus_default.css and nice_menus.css is located at the ends of the file.
* In nice_menus.module, the changes are:

1) adding a new menu type (table) to $form['nice_menus_type_'. $delta]
2) adding hooks to nice_menu_table, nice_menu_build_table for generating tabled menus
3) the two new functions in (2), which are very similar to nice_menu_tree and nice_menu_build
4) a conditional in nice_menu that calls nice_menu_table instead of nice_menu_tree if needed.

The table-specific code ignores menu items more than 3 levels deep (it could probably be hacked to do a popup for deeper stuff, but it would be ugly).

Anyway, hope you find it interesting, and look forward to comments/suggestions.

✨ Feature request
Status

Closed: outdated

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States MadOverlord

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024