This project is not covered by Drupal’s security advisory policy.

Overview

Mega menus are a type of drop-down, which seeks to overcome some of the usability drawbacks of traditional drop-downs. Hierarchy of your navigation is made visible all at once and the amount of clicking, searching, and navigating is reduced.

This module allows you to build mega menus by leveraging jQuery and the existing Drupal menu system. Megamenu takes a Drupal menu that is 3 levels deep, and converts it into a categorized 3-level mega menu, which is placed into your site as a block.

What's the deal with Megas?

What does this module do?

This module takes any existing Drupal menu and produces the markup for a mega menu. It also provides the Javascript for mega menu behavior, including support for diagonal navigation (the menu stays active even if the mouse moves off of one menu pane and onto another).

Features

  • Turns a Drupal menu into a Mega Menu
  • Creates javascript events on menu open/close for interactive possibilities
  • Solves the "diagonal problem" (menus do not immediately disappear when the mouse moves away from the parent menu item, or moves between panes)

The module provides classes and ID's that allow for a full-range of styling customization, from more traditional (but multi-level) drop-downs to full width slide out menus.

A couple demo skins are supplied, but these are purely for instructional purpose to help get you started with theming your mega menu. Currently, you should have an understanding of how Drupal overrides module CSS files and how to add CSS to themes, in order to provide your own styles in your particular theme.

Examples

Known problems

If you simply enable this module and select an included skin, your menu will likely look odd or broken. This is because Drupal loads module CSS files load before theme CSS files. To remedy this, copy the skins' CSS code into your theme, and make sure you haven't declared more specific rules in your other stylesheets.

Tutorials

Thanks to CMS QuickStart for a great write up on how to work with megamenus.

Extend with these modules

  • Taxonomy Menu: Can be used as a source menu for this module, which displays taxonomy trees as a Mega Menu
  • Special Menu Items: Can be used to make slot titles and menu items into non-links. Note: This isn't really a recommended module, but we had a feature request to make Megamenu work with it..
  • Menu Icons: Can be used to add icons next link items.

Similar projects

Nice Menus
Menu Minipanels (A Panels based mega menu module)
OM Maximenu ( A new mega menu module with lots of promise; Allows embedding of blocks and media)

Credits

Created by erykmynn and FilmKnurd.
Thanks, afreeman for his help and advice in the beginning.
Thanks, sylv3st3r for porting the module to D7.
The project was passed on to ram4nd.

Supporting organizations: 
Sponsored partially.

Project information

Releases