Last updated 19 September 2016. Created on 18 August 2016.
Edited by cdesautels. Log in to edit this page.

Megamenu Framework module

Documentation

  • Dependencies
  • Recommended modules
  • Installation
  • Configuration
  • Troubleshooting

Dependencies

This module requires the following modules:

Recommended Modules

  • Menu Blocks: This module provides configurable blocks of menu links with advanced features.

Installation

Install as you would normally install a contributed Drupal module. See: https://drupal.org/documentation/install/modules-themes/modules-7 for further information.

Configuration

The module will create a theme region, "Megamenu Framework" and a block, "Megamenu". It will automatically assign this block to the region. DO NOT ADD ANYTHING ELSE to the "Megamenu Framework" region. It should remain dedicated to only the auto-assigned "Megamenu" block.

You will need to add this region to the appropriate template location in your site's theme. The region's machine name is "megamenu_framework" so for example, in your page.tpl.php...

<div id="megamenu-wrapper">
  <div class="section clearfix">
    <?php print render($page['megamenu_framework']); ?>
  </div>
</div>

This should be the only thing you need to add to your theme files.

NOTE: You are not required to use this region. If you like you can move the Megamenu block to any region of your choosing and skip the template alteration outlined above. I just chose to isolate Megamenu Framework's output from the rest of the site by default.

On the top of module's admin page are the "categories" (click on "Add Category" at the top right to start). These are the main menu buttons and matching pulldowns. You specify the category and the number of columns its matching pulldown will have. The module will generate the Theme Regions for each one. You'll build your megamenu by adding blocks to the appropriate regions. On your Blocks admin page You'll see regions for each megagmenu column in each category.

For example: "Megamenu pulldown: My Category Title -- columnX"

Simply assign blocks to these to build your Megamenu. Any block can be inserted, but you'll probably make heavy use of "Menu Blocks".

DO NOT add these regions to your templates. Their content will be automatically added to the "Megamenu" block mentioned above.

Block Placement

This module supports placing block content with both the Core Block UI and the Context Module. While both methods can be used at the same time, their content cannot be intermingled. So choose with one you want to appear at the top of each region.

Triggering Event

Select the type of event that triggers the megamenu. If you select "hover" then each category provides for an optional url (for the main menu button).

Main Category Links

When the triggering event is set to "hover", you have the option of adding links to the main category items. They are by design NOT part of the menu system so they won't recieve any links from there. If you turn on links but don't provide a url to a category, its anchor will have an href of "#" and the class "no-link", so you can override the link styling if you want.

Click Event Exclusions

There are two types of events that will trigger the pulldowns. Hovering on a main menu item and clicking on one. If you select "click" you'll get an optional form on the admin page for excluding DOM objects from click events. The megamenu's default behavior is to open pulldowns when the main menu items are clicked. After that, clicking ANYWHERE will close the pulldowns.

But what if there's something you don't want to react to a mouseclick. For example if you put a search box in the megamenu. You don't want the menu to close when a user clicks on the input field.

That's what this configuration is for. Enter a jQuery identification string here for the page element in question and it will be exempted from the click event. One ID string per line.

Active Trail Class

The main menu items generated by this module are not in the Drupal menu system. So they won't receive an "active-trail" class from Drupal. But there is a jquey plugin provided that allows you to set one.

Arg: index = the 0 based index of the main menu item you want to set.

$(document).megamenu_framework_set_active_trail(index);

Calculating the index is beyond the scope of this module. You'll have to do that yourself. If you have a consistent url path scheme, you should be able to process the request and select the index based on the first item in the url path.

Data Loss

You'll see a number of warnings in the help text about blocks being disabled on certain admin operations. THEY WILL NOT BE DELETED. This module does not touch your content data and won't damage or destroy it. But once disabled, the blocks won't re-appear until you manually re-assign them to another region.

Troubleshooting

A CSS override is not working.

  • There are a handful of styles that are defined by the module, if you have trouble overriding something, just include "!important" in your CSS declaration.

The Megamenu is not printing to the page.

  • Make sure you are printing the "meganenu_framework" region to the appropriate template.
  • Make sure the "Megamenu" block is assigned to the "Megamenu Framework" region.
  • Make sure you've assigned content to the auto generated category/column regions.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.