This patch introduces a module called nice_mega_dropdowns, which provides the ability to use nodes as dropdown menu items in a nice menu.

Some background

I recently encountered some complex requirements for dropdown menu items in the context of a specific project. After a bit of research on mega dropdowns, I’m convinced that this is a proven, broadly useful UI pattern and I’ll be seeking to implement it wherever possible.

In looking at some other modules that provide this functionality, their emphasis seems to be on splitting conventional menu items up into multiple columns. I’m concerned that many mega dropdowns in the wild, like on Reuters and ESPN, are more complex than the Drupal menu system can accommodate. So rather than try to impose any sort of structure on the content of the dropdown, I went for the “anything goes” approach of making the dropdown a full-blown node.

I decided to implement this as an extension to nice_menus because of that module's maturity, and because Superfish integration provides cross-browser compatibility benefits that I don’t have to reinvent.

I tried to do it without modifying nice_menus itself, but theoretically I’d need an alter hook that could be used to manipulate the menu structure before it’s rendered as HTML. So I had to modify theme_nice_menus_build() slightly.

Usage

Edit a menu item, and select a node in the “Dropdown” autocomplete field. When that menu item is displayed in a nice menu, the node body will be displayed as a dropdown, replacing any child menu items. The normal (“not nice?”) menu display is not affected.

Known Issues

  1. The autocomplete field on the menu item form searches by title, but when a node is selected, only the nid is displayed in the field.
  2. Unordered lists inside the dropdown node do not work as expected, because they are hidden by Superfish every time they are hovered on.

Thanks maintainers, I’m looking forward to getting your feedback and I hope you find this useful.

Comments

davidtrainer’s picture

The patch above apparently doesn't create the new files properly. I'll re-roll it tomorrow. It will apply cleanly if you touch the 3 files it needs, first.

davidtrainer’s picture

StatusFileSize
new4.89 KB

Fixed.

laryn’s picture

Interesting! I was hoping to use the MegaMenu module but it's giving me errors and this may give some added flexibility. I will try to do some testing on this next week.

MJH’s picture

That's a great add-on for nice-menus! The patch from #2 works without a problem.
Is someone using this on a bigger website and has some experience about the performance?
(for every menu item using mega menu functionality, an additional node has to be loaded - is this cached somehow...)

gillisig’s picture

Subscribing :)

davidtrainer’s picture

@MJH: Thanks for the feedback. Extra node_load() calls are definitely a performance concern. My hope was that this could be handled by one of Drupal's more generalized caching solutions like block caching, but I have been struggling with this. Even after hacking nice_menus_block() to enable caching, and even though the block is actually being stored in the cache_block table, it's still reaching the node_load() on every request.

It seems like this will eventually come down to implementing a caching mechanism specific to this module. I'd like to have this existing code made official in some manner before taking that on, so I'm hoping to have a nice_menus maintainer weigh in here soon ;)

deviantintegral’s picture

Version: 6.x-2.1 » 7.x-2.x-dev
Status: Needs review » Needs work

This now needs porting to the 7.x-2.x version of the module. Though it would be good if a maintainer could chime in if this is something that would be committed or would be better as a separate module.

davidtrainer’s picture

Status: Needs work » Needs review
StatusFileSize
new5.94 KB

Patch ported to D7.

treckstar’s picture

Excellent! This patch is just what I needed to turn my Nice Menu into a Mega Menu. Are there any maintainers available to see if Mega Menus could be incorporated into the Nice Menus project?

davidtrainer’s picture

Recently discovered that if you delete a mega dropdown node that is still referenced by a menu item, this happens: #1277376: EntityMalformedException: Missing bundle property on entity of type node. in entity_extract_ids() (line 7390

davidtrainer’s picture

StatusFileSize
new7.02 KB

This updated patch adds caching for the dropdowns' content, fixes the EntityMalformedException that results from deleting a dropdown node, and includes some minor cleanup.

davidtrainer’s picture

StatusFileSize
new7.06 KB

Updated patch; fixes a PHP notice.

klonos’s picture

Status: Needs work » Needs review

I didn't test this patch yet, but I intent to as soon as I get a chance. Just wanted to let you know that Superfish supports mega menus since version 1.7.3:

...
v1.7.3 Alter JS to allow mega-menus. Provide mega-menu CSS and example page. Added bower.json. Resolve some jsHint issues.
...

So if you check the zip file, you'll find:

/src/js/megamenu.js
/src/css/megamenu.css
...and their respective minified versions:
/dist/js/megamenu.js
/dist/css/megamenu.css
...as well as an example:
/examples/megamenu.html

Currently we ship the module with Superfish 1.4.8, but there's #2001616: Upgrade included Superfish library to the latest version 1.7.4 (currently shipping 1.4.8). Even if that doesn't get in we now have #1411268: Support Libraries API for the js files. with which my setups include the following and work flawlessly:

- jQuery 1.9.1 (using jQuery Update patched with #1901672-10: Offer latest jQuery 1.9.x as an option (currently 1.9.1).)
- latest Nice Menus 7.x-2.x-dev (it includes #1411268: Support Libraries API for the js files.)
- jquery.bgiframe 3.0.0
- jquery.hoverIntent r7
- Superfish 1.7.4

Status: Needs review » Needs work

The last submitted patch, 1148746-nice-mega-dropdowns-d7_2.patch, failed testing.

Status: Needs review » Needs work
davidtrainer’s picture

Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new6.71 KB

Reroll for latest 7.x-2.x-dev

klonos’s picture

...giving this a go and I will report back as soon as I can.

PS: @davidtrainer: do you have any comments on my suggestions back in #13?

davidtrainer’s picture

@klonos, sorry, I'm not sure what's being suggested in #13. As far as I can tell, superfish support for mega dropdowns just means the dropdown is a div instead of a ul element, which seems to make sense - it might address the issue I identified in the summary involving unordered lists in the dropdown, but I'm still going through their examples. Is that what you were getting at?

klonos’s picture

Ok, here's my quick-run feedback: it works as expected and I noticed no issues, but...

The approach taken here is replacing all child menu items with a single node. So in order for one to create a "mega" item, they need to create a node, add any links (perhaps in a list) + images + what have you. This is great, but from what I could tell, users need to also know some basic html/css in order to theme this to fit their site's design. Also moving mega-menu items around means editing and copy/pasting around these mega-menu nodes. Not what I had in mind when we were discussing this issue in the first place, but hey it works!

Here is a small but important suggestion: I think it would be wise if we reserved the nice_mega_dropdowns as a name for a future solution that provides menu item rearranging via a drag-n-drop UI (similar to TB Mega Menu). We should call this one something like nice_mega_node_dropdowns or nice_mega_node_menus instead. Having the term "node" in the module name also makes it clear about the method it uses.

Re. #18: yes, that was precisely my point. If we adopted that method, we could eventually come up with a UI to define columns and place regular menu items in a way that we render a "true" mega menu with items that can be dragged (a node-less solution).

klonos’s picture

...for example, we could have 2nd level menu items be column headers/containers and any 3rd level items below them be the actual menu items of each column. Something like that anyways. Thoughts?

davidtrainer’s picture

Status: Needs review » Needs work

klonos,

I appreciate the feedback.

Given that this patch is for 7.x-2.x, I don't think we can use superfish's mega dropdown structure. That's because we do not have a new enough version of superfish, we can't upgrade superfish because it requires a version of JQuery later than the one shipped with D7, and the maintainers have decided against introducing Libraries API and JQuery Update dependencies into 7.x-2.x.

users need to also know some basic html/css in order to theme this to fit their site's design.

Yes, they do. The same can be said of Nice Menus. I'm very open to CSS changes that would improve the initial installation and setup experience, provided it doesn't harm extensibility via theming.

I think it would be wise if we reserved the nice_mega_dropdowns as a name for a future solution that provides menu item rearranging via a drag-n-drop UI (similar to TB Mega Menu). We should call this one something like nice_mega_node_dropdowns or nice_mega_node_menus instead.

I still prefer the name as it currently exists in the patch, because "Mega Dropdown" is widely used and recognized as a term for this specific UI pattern. The same cannot be said of "Mega Node Dropdown" or "Mega Node Menu."

we could eventually come up with a UI to define columns and place regular menu items in a way that we render a "true" mega menu with items that can be dragged (a node-less solution).

I don't agree with the implication that the only "true" mega dropdown menu is one that has a drag-and-drop UI, and I remain opposed to any approach that imposes a structure on the content of the dropdown, for the reasons explained in the summary. A "UI to define columns" would necessarily do that.

Changing status because of the unresolved issue with the autocomplete field on the menu edit form.

davidtrainer’s picture

Status: Needs work » Needs review
StatusFileSize
new7.25 KB

This updated patch should fix the issue with the autocomplete field on the menu item edit form - it now displays the node title instead of the nid.

Status: Needs review » Needs work

The last submitted patch, 22: 1148746-nice-mega-dropdowns-d7.patch, failed testing.

klonos’s picture

@davidtrainer: fair enough. If you stick with the node method, I believe that it would be a great idea if when enabled the submodule created a dedicated content type called "Mega menu". The workflow then would be: add content -> new "Mega menu" -> Provide a menu link -> save. Just a thought.

davidtrainer’s picture

Status: Needs work » Needs review
StatusFileSize
new7.25 KB

Bad testbot, bad!

xiukun.zhou’s picture

davidtrainer’s picture

StatusFileSize
new7.25 KB
davidtrainer’s picture

Reroll for 7.x-3.x branch

xiukun.zhou’s picture

Status: Needs review » Fixed

Thanks davidtrainer.

davidtrainer’s picture

Status: Fixed » Needs review
StatusFileSize
new5.45 KB

@xiukun.zhou

Thanks for committing. Unfortunately, I screwed up the last reroll of the patch by forgetting the new files added. The attached patch includes only the new files, not the changes to nice_menus.module which have already been committed, and it should apply to both the 7.x-2.x and 7.x-3.x branches.

xiukun.zhou’s picture

Status: Needs review » Fixed

Thanks davidtrainer

Commit 9c54307 on 7.x-3.x

Commit 5c1c6ea on 7.x-2.x

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.