Notes:

  • This module is in beta and under active development. Use on production sites at your own risk, and use caution when upgrading.
  • 7.x-2.x is the active development branch--new features go here
  • 6.x and 7.x-1.x branches are now bugfix only.

Overview

Mega menus are a type of drop-down, which seeks to overcome some of the usability drawbacks to traditional style drop-downs. Primarily, mega menus have two advantages:

  1. The information architecture of your navigation is made clearer and is visible all at once
  2. 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.

Shown to the right is an example of a mega menu taken from actionenvelope.com.

What's the deal with Megas?

What does this module do?

This module takes any existing Drupal menu and produces the markup for a megamenu. 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)

Who is this module for?

Currently, this module is for Drupal themers (and developers) who want extra markup for menus that allow for fully customizable styling of mega menus. 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.

Who is using this module?

Here are a few examples of what people are doing with this module.

How can I contribute?

Co-Maintainers Wanted: If you're a Drupal or PHP developer using the Megamenu module, please consider joining our team. You can start by submitting patches, and we will be looking for people to take on more active roles in the project. Just leave a note in the issue queue.

Update notes:

Updating from 6.x-2.x ALPHA1 or 6.x-1.x-dev: Loading your custom skin file from your site's file directory is no longer supported. You are required to migrate your skins to your theme.

Development plans / status

6.x & 7.x-1.x

Accepting bugfix patches only, some feature requests will be moved to the current development branch. Maintainers: erykmynn, FilmKnurd

7.x-2.x

Maintainers: ???

Requirements

JQuery (Drupal Core), no dependencies on contributed modules.

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 megamenus work with it. We will eventually replace this with our own functionality.
  • Menu Icons: Can be used to add icons next link items.

Similar projects

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. Special thanks to afreeman for his help and advice in the beginning and to sylv3st3r for porting this module to D7. Thanks to rgarand for creating the shiny new 7.x-2.x branch.

Thanks to patch contributors: danielhonrade, msm_mg, electblake, penyaskito

Sponsorship

Development partially sponsored by Astonish Design

Project Information

Downloads