jQuery MegaMenu

the popular jQuery plugin

  1. A completely revamped JS and CSS code-base.
  2. Easier to use. (A lot simpler HTML and JS needs to be used to initiate the menu)
  3. Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple
  4. Customizable menu activation and deactivation actions. Now you can choose to activate the menu by click or by mouseover
  5. HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
  6. Automatic alignment of the menu content according to the width of the parent menu container.
  7. Variable width of the menu contents.
  8. Non obtrusive and easier to understand CSS.


In the header section of the HTML add the following:


We can replace megamenu with the class of the megamenu unordered list. To have the megamenu aligned to right just use the option ‘justify’:’right’

Next in your body add the following code:

Advanced Options and Usage

To have the megamenu activated on click use the ‘activate_action’ option as follows:

jQuery(".megamenu").megamenu({ 'activate_action':'click' });
// Can take 'click', 'mouseover' and 'mouseenter' as values only. Default: 'mouseover'

MegaMenu Show/Hide Options:

jQuery(".megamenu").megamenu({ 'show_method':'fadeIn', 'hide_method': 'fadeOut' });
// 'show_method' can take 'fadeIn', 'slideDown' and 'simple' as values only. Default: 'slideDown'
// 'hide_method' can take 'fadeOut', 'slideUp' and 'simple' as values only. Default: 'slideUp'

MegaMenu Align Options:

jQuery(".megamenu").megamenu({ 'justify':'right' });
// Can take left/right. Default: left

Enjoy the MegaMenu Plugin and do not forget to comment about it here.
If you like the plugin do share it.


Leave a comment