Themeforest

WordPress Plugin – jQuery Drop Down Mega Menu

Updated 2nd November 2012

Drop down mega menus are becoming more popular as an alternative to standard drop down menus.

This WordPress menu plugin will allow you to quickly and easily create drop down mega menus from any WordPress custom menu. The plugin can handle multiple mega menus per page, offers a choice of animation effects (fade or slide), the option to set the drop down sub-menu to full width plus the choice to activate the menu using either hover or click.

For Vertical Mega Menus

If you are looking for a vertical version of the mega menu see our WordPress plugin –
jQuery Vertical Mega Menu Widget.

Also Check Out Our Premium WordPress Plugins:

Download jQuery Mega Menu

Download JQuery Mega Menu Widget 1.3.9 (69,059)

jQuery Mega Menu Demos

  1. Mega menus using plugin skins
  2. Example mega menu with more advanced custom styling

Installation

  1. Upload the plugin through ‘Plugins > Add New > Upload’ interface or upload ‘jquery-mega-menu’ folder to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. In the widgets section, select the jQuery mega menu widget and add to one of your widget areas
  4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use this plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin. Although the widget will work with any menu structure, for best results use 3 levels for the custom menu – see sample screenshot of custom menu structure below.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area in the required location. This is a horizontal menu so it needs to be located where it can expand to accomodate all of the top level items.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Mega Menu

To create your mega menu go to the widget admin page and drag the “jQuery Mega Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several parameters that can be configured to help cutomise the mega menu:

Hover/Click

Select whether you would like the menu to activate using hover or click.

Number Items Per Row

Select the number of sub-menu items to be shown on each row of the mega menu.

Skin

Several sample skins are available to give examples of css that can be used to style your own mega menu

Animation Effect

The effect used to display the sub-menus – options are; fade in or slide down. See the mega menu demo page for examples.

Animation Speed

The speed at which the dropdown menu will open/close. Selecting the “No Animation” option will remove both the fade in/out and slide effects.

Set Sub Menu To Full Width

If checked, the drop down mega sub menu width will be 100%

Frequently Asked Questions

Please refer to our FAQ pages for the jQuery Mega Menu Plugin for a complete list of questions and answers.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please also check previous comments and FAQ for further information/tips.

For plugin customisations or additional support please contact us for a quotation.

Demo jQuery Mega Menu

In addition the main navigation used on this website also uses the jQuery mega menu plugin.

Download The Plugin

Download JQuery Mega Menu Widget 1.3.9 (69,059)

Feedback

If you find this plugin useful please rate it at wordpress.org.

Updates

Version 1.3.10 – 2nd November 2012

  • Updated: plugins_url()
  • Updated: combine jquery scripts

Version 1.3.9 – 26th August 2012

  • Updated: wp_enqueue_script

Version 1.3.8 – 12th November 2011

  • Updated: jquery.dcmegamenu.1.3.4.js and switched to minified version

Version 1.3.7 – 14th Augut 2011

  • Fixed: Bug with default values

Version 1.3.6 – 27th July 2011

  • Added: Full width option for mega menu
  • Updated: jquery.dcmegamenu.1.3.3.js

Version 1.3.5 – 15th May 2011

  • Added: Ability to turn off animation effects by selecting “No Animation” in speed menu options

Version 1.3.3 – 8th Apr 2011

  • Fixed: IE7 bug due to jQuery initialisation code

Version 1.3.2 – 27th Mar 2011

  • Added : Option to use either hover or click events

Version 1.3.1 – 15th Mar 2011

  • Added : Mega menu automatically adjusts right alignment to stay within menu boundary

Version 1.3 – 7th Mar 2011

  • Added : Ability to select either fade in or slide down animation effects

Screenshots

Widget in edit mode

Sample custom menu structure – For best results use 3 levels for the custom menu

Sample mega menu skins

Tags: , , , , , , ,
Categories Wordpress Plugins 31661 Views

464 Comments

Enter text to filter comments:

« Older Comments
  • JQuery WordPress Menu Plugins 2013 Apr 21 at 9:49 am

    [...] #1 – Mega Menu Widget – Download | Screenshots & Docs [...]

  • How to create megamenu in komodo themes | Just blog and reviews 2013 Mar 22 at 2:06 am

    [...] Then save widget.. Done. This source plugin. [...]

  • Ivano 2012 Apr 13 at 9:12 pm

    Hi, how can i set your megamenu, like the main menu of my site?
    This is my site: lnx.parcocoriolano.it/sito

    Thanks

    • Admin 2012 Apr 13 at 9:23 pm

      Hi,

      Just follow the instructions on the plugin home page. It should contain all the info required to set up a standard drop down menu

  • cavit 2012 Apr 12 at 2:02 am

    hi how can i mega menu to my header.php. Is there any shortcodes to insert header.php

    • Admin 2012 Apr 12 at 4:09 am

      Hi,

      Create a new widget area and add the widget area code to the header.php file. You can then use this to insert the menu via the widget admin area

  • Frederic 2012 Apr 03 at 7:50 pm

    Great Plugin.
    However, would it be possible to rename the .row class to something else? This name is by far too common and can easily clash with some global styling in some themes. For instance, the plugin doesn’t work well with Twitter bootstrap based themes because of some global .row styling.

    • Admin 2012 Apr 03 at 7:57 pm

      Hi,

      Not without modifying the jquery plugin. The theme shouldnt apply generic CSS rules

      • Frederic 2012 Apr 03 at 9:10 pm

        Sure, I was meaning, it would be great if “possibly” you could change this for the next version.

        It seems very convenient to have generic css rules at the theme level. This is already the case when resetting things or when defining standard tags (h1, h2, …).
        If someone wants to make particular use of those tags, he should not rely on any particular attributes having some value.

        On the other hand, plugin, modules or whatever, should try to avoid possible clashes either by using some classes that are not likely to exist (dcjq-row?) or by specifying most attributes to avoid inheriting weird values.

        I’m not a CSS expert and you could be right regarding the use of generic rules (though it would make things more complicate when you need rules that are really generic), however, in real world, most themes use them and even Twitter Bootstrap which seems a polished piece of work use them.

        It may be easier to ensure things are not likely to clash on your side. Not a problem, If that’s not possible.

  • Stephan 2012 Mar 29 at 6:45 pm

    Hi!
    First of, great plugin! Appreciate your work.

    I use your plugin with a lot of 1st level menu-items (13). The maximum width I use is 1000px, so it creates a second line of the menu. This is no problem since I styled it in a way that still look fine. However when I hover over the 1st level items on de second line, the subcontainer goes over the menu-item. This is because it automatically creates a top:40px on the absolute positioned subcontainer. For the second line that should be 80px. Is there a way to get this correct? I tried giving the subcontainer a position relative, but that causes everything to move on the mouseover.

    Hope you can help me. Either way thanks!

    Stephan

    • Admin 2012 Mar 29 at 7:03 pm

      Hi,

      You could give the 2nd level menu items sub-container a margin-top of 40px

  • Daniel Schulz-Jackson 2012 Mar 26 at 12:45 pm

    Okay, so I’m not sure what I’m doing wrong, but every time I place the jquery mega menu widget, it just comes out as a boring text vertical menu… nothing like the shiny screenshots!
    examples:

    Widgets-on-pages: (no jQuery site) http://dsjprojects.com/home/mega-menu-test/
    Sidebar widget: (jQuery site) http://signsofsafetyusa.net/2012/03/22/example-article/

    I’m sure it’s something dumb but maybe there’s someone else in my shoes. Your plugin looks great and might just save me from some major issues,

    thanks,
    ~Daniel

    • Admin 2012 Mar 27 at 4:04 pm

      Hi,

      You need to either use one of the skins that comes with the plugin or create your own style sheet

  • MySpace Programmierer 2012 Mar 23 at 3:49 pm

    Thanks for the plugin, I’ve already used several times and it has always worked wonderfully. But now I have a new page and right there it does not work, I also do not know what it is, it shows only the main pages without sub pages, the individual menu plugin that comes with WordPress installed together, but shows everything correctly, no matter whether I set hover or click, you can help me maybe?

    • Admin 2012 Mar 23 at 3:58 pm

      Hi,

      then check the page for errors using firebug and the FAQ for info on how to correct them. Obviously there is an issue with the page since the plugin hasnt changed

  • fadedline 2012 Mar 20 at 10:47 pm

    Is there anyway to make this plugin work when the user has java turned off? As it is now the submenu’s are not accessible without java.

    • Admin 2012 Mar 21 at 7:50 am

      Hi,

      You will need to remove any CSS that hides the sub-menu levels

      • fadedline 2012 Mar 21 at 10:33 pm

        Thanks for the quick response! If I remove any css that hides sub-menus then wont they be visible all the time? The only place I see where there is display:none is the dcjq-mega-menu.css file.

        Is there a way to have it look the same if the user has java on or off? I know of course there wont be animation effects or hover intent but thats ok. Sorry for all the questions…its just that we get a decent amount of users who view the site with java off. Thanks!

        • Admin 2012 Mar 23 at 12:22 am

          Hi,

          No unfortunately the mega menu requires javascript in order to work correctly

  • Raja 2012 Mar 20 at 5:51 pm

    hi,

    your plugin is really awesome. I need to do some changes based on my requirement.

    is it possible to set secondlevel items in collapse mode, i mean when mouse hover on the item, chid items should be appeared.

    please reply me

    • Admin 2012 Mar 21 at 7:47 am

      It is possible but would require modifying/adding additional jquery. The plugin doesnt include this feature

      • Raja 2012 Mar 21 at 11:52 am

        can u please suggest me, which jquery i have to add to include that feature

        Thanks
        Raja.

  • robert 2012 Mar 15 at 2:13 am

    Please ignore my email question about jquery mega menu sent yesterday, decided to go in another direction with the web site menu.

  • robert 2012 Mar 14 at 12:26 am

    Excellent plugin, thank you!
    Just installed on new site-
    http://www.vaultcollectibles.com
    WordPress 3.3.1

    1- Not sure how to remove wp menu that stills appears below mega-menu.

    2- Settings for widget are: Number Items Per Row: 3, Set Sub Menu to Full Width

    Those settings are not active on site.

    Appreciate any direction,
    robert

    • Admin 2012 Mar 14 at 8:44 am

      Hi,

      To remove the existing menu you will need to delete the actual menu code from the template files

      • robert 2012 Mar 15 at 2:14 am

        Thanks for reply will work with the plugin on another site at later date.

    • Ivano 2012 Apr 13 at 9:22 pm

      Hi Robert,
      i would to know,
      what is the way to set the mega menu, like the main menu of the site?
      My site is lnx.parcocoriolano.it/sito

      Thanks

« Older Comments

Enter text to filter comments: