jQuery MegaMenu 2

This is a sequel to the popular jQuery MegaMenu Plugin, with quite a lot of changes in the code base and usability.

Demo: Click Here
Download: Click Here
Project Repository: Click Here

So whats new in jQuery MegaMenu 2

  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.

Usage:

  • In the header section of the HTML add the following:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="javascripts/jquery.megamenu.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".megamenu").megamenu();
    });
    </script>

    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:
    <ul class="megamenu">
    <li>
    <a href="javascript: void(0)">First Menu</a>
    <div style="width: 350px;">Contents of the first mega menu</div>
    </li>
    <li>
    <a href="javascript: void(0)">Second Menu</a>
    <div style="width: 350px;">Contents of the second mega menu</div>
    </li>
    </ul>

Advanced Options and Usage

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

    ?View Code JAVASCRIPT
    jQuery(document).ready(function(){
        jQuery(".megamenu").megamenu({ 'activate_action':'click' });
    // Can take 'click', 'mouseover' and 'mouseenter' as values only. Default: 'mouseover'
    });
  • MegaMenu Show/Hide Options:

    ?View Code JAVASCRIPT
    jQuery(document).ready(function(){
        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 JS Shadow Options:

    ?View Code JAVASCRIPT
    jQuery(document).ready(function(){
        jQuery(".megamenu").megamenu({ 'enable_js_shadow':true, 'shadow_size':5 });
    // 'enable_js_shadow' can take true/false. Default: true
    // 'shadow_size' can take any whole number greater than 0. Default: 3
    });
  • MegaMenu Align Options:

    ?View Code JAVASCRIPT
    jQuery(document).ready(function(){
        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.

This entry was posted in Featured, Javascript, Programming and tagged , , , , , . Bookmark the permalink.

272 Responses to jQuery MegaMenu 2

  1. Pingback: 17 Useful jQuery Plugins to Improve the Look and Feel of Your Website

  2. vamsi says:

    thanks for the megamenu !! it’s working fine in chrome,but when i use in IE& the menu is little bit slow. please advice how to improve the performance in IE7

    thanks in advance
    Vamsi.

  3. First – amazing plug in, the more configurable one I’ve seen of this type! I ran into a wall with just one thing I’m hoping for some feedback with. Position of subnav items – Firefox vs other browsers.

    I saw the solution posted in the past included below. I replaced all “offset” with “position” in the js:

    mm_item_content_obj.css({
    ‘top’: ($mm_item_link.position().top + $mm_item_link.outerHeight()) – 1 +”px”,
    ‘left’: ($mm_item_link.position().left) – 5 + ‘px’
    })

    There is about a 20px difference between Firefox and all other browsers tested. IE8, IE9, current versions of Chrome and Safari.

    I used Firebug to basically strip anything not required by the code related to relative or absolute positioning. Tested the css, but no dice.

    I am open to learning and doing the work, I could just use a push in the right direction please. And I meant what I said, we needed something like this script long ago. Thank you!!

    Solution from Past Post:
    “You can fix this problem if you open the js code and find the line where it calculates left and top position for submenus. Note that I’m using version 1 but I assume same problem is in version 2 also:

    ‘top’: ($mm_item_link.offset().top + $mm_item_link.outerHeight()) – 0 + “px”,
    ‘left’: ($mm_item_link.offset().left) – 0 + ‘px’

    Now just simply replace “offset” with “position” and submenus will be positioned relative to parent position, not the edge of the browser window. Replace zero with any number for fine adjustments.”

  4. No matter what css or script changes I tried, the subnavigation menus kept drifting to the right. They also drifted differently in Firefox than they did in all other browsers.

    A positioning element like the snippet you see below can work with either the “offset” or “position”. This offers the option to position elements relative to parent position or the edge of the browser window for things like subnavigation menus.

    mm_item_content_obj.css({
    ‘top’: ($mm_item_link.position().top + $mm_item_link.outerHeight()) + 3 +”px”,
    ‘left’: ($mm_item_link.position().left) – 0 + ‘px’
    })
    This is great for having additional flexibility for positioning items that are script driven. This issue? It was reading a width assigned in the stylesheet for the body tag. The body tag is often used to set site content width. However some Jquery powered scripts pick up on width attributes specified in the body tag and take them into consideration when calculating. Once the width was removed from the body tag, it behaved exactly as expected in all browsers.

    More information is available here: http://api.jquery.com/offset/

  5. Pingback: mega-menu | J a m o B l o g

  6. Shane says:

    I only have one megamenu dropdown in the navigation and I would like it to display for a second when the page loads. Is this possible?

  7. Tom Raudabaugh says:

    I am using the MegaMenu within an Oracle Application Express application. I have a Tabular Form (Grid Edit) Excel like view where the Menu is at the top of the page. My on page load event loads the Menu. In Firefox my clicking around the page which has alot of select list, text boxes, radio buttons displays has no problem with selecting the appropriate item. However, in IE 7.0.5730 I am experiencing about a 2 second delay sometimes on my click on these items. If I take the megamenu off the page I don’t have the problem. Any help on this would be appreciated. I really like you plugin.

    Thanks,
    Tom

  8. Pingback: MKFMN › jQuery MegaMenu

  9. Curious says:

    Can you also build hierarchical menus with it?

  10. Leon says:

    I’d like to embed a youtube video in one of the dropdowns and I’d like it to stop playing when the dropdown diasappears. Any ideas?

  11. Shulem says:

    I tried to implement it on my site, but it’s not visible at all!
    But it’s really there (see code).
    I know it’s just this little thing that I’m forgetting. Any help appreciated.

    • Phil says:

      Check the link to the jquery.megamenu.js – This happened to me and I realized I had a typo in my link to the script.

  12. Pingback: jQuery Mega Menu集合 | ~SolagirL~

  13. Pingback: Refreshi Weblog | News and Inspiration » 28 Best jQuery and JS plugins for your website’s presence

  14. Chris Platts says:

    We are using Megamenu in a proof of concept for a new site for Cancer Research UK.

    Is there a way of making it work for keyboard users? (eg activate_action = focus).

  15. Pierre says:

    Hi,
    Thanks for this super cool plugin. It is just great.
    I was wondering how to nicely hide the MegaMenu when I click on a link inside the menu?
    Thanks a million in advance!

  16. Mikita Gandhi says:

    Hello,
    I have also used this menu in my website. But it works fine in local server. Whenever it runs on the live server in wordpress it gives me error that “Uncaught TypeError: Object [object Object] has no method ‘megamenu’ “. Please help me to solve out the problem. Thanks in advance.

  17. Hello,

    Is that possible to make round corner boarder ?

    After installing this in my site, it used to give error message in IE8

    for example:

    http://www.egtours.com/10_days_nepal_trip.php

    I think it create conflicts between mega menu and light box if we put together in one page.

  18. bruce john says:

    MM2 requires JavaScript to be on, to be visible. There are large Government agencies that disable JavaScript as part of their SOP. Is there a way to make the first level LI’s visible when JavaScript is turned off, and use the JS to just display the pop-up’s?

    • ryan says:

      I’m not sure if your website can be setup this way, but you could have the top navigation URL point directly to a main page for that “category” that lists all of the “sub categories”.

      Then in the jquery.megamenu.js change:
      jQuery(this).bind(“click”, function(e){
      e.stopPropagation();
      });

      to:

      jQuery(this).bind(“click”, function(e){
      e.stopPropagation();
      return false;
      });

      What will happen is if Javascript is disable, the visitor will be taken to a page that lists the sub links for them to choose. If javascript is setup, the menu should work like normal.

      You may also have to play with the CSS as the drop down add a large blank spot due to the drop down are no longer there.

      I know this isn’t what you asked, but it is a solution.

  19. Ryan says:

    My menu is still drifting to the right. There ar no attributes in the body tag. Has anyone else had this issue?

    • Aldo says:

      Your comment is old but I found the solution, maybe someone has the same problem, first you need an object with a selector of your menu, for example:

      var $maincontainer = jQuery(“.megamenu”);

      Next, change this:

      mm_item_content_obj.css({
      ‘top’: ($mm_item_link.position().top + $mm_item_link.outerHeight()) – 1 +”px”,
      ‘left’: ($mm_item_link.position().left) – 5 + ‘px’
      })

      To this:

      mm_item_content_obj.css({
      ‘top’: ($mm_item_link.position().top + $mm_item_link.outerHeight()) – 1 +”px”,
      ‘left’: $maincontainer.position().left + ‘px’,
      })

      How it works?, it’s pretty simple, with the selector and the position() you can retrieve the exact position where your menu starts then assign that value to the class ‘mm_item_content’.

  20. games says:

    very nice menu i love it thanks

  21. nutless_neo says:

    I’m trying to use the option ‘enable_js_shadow’:true, ‘shadow_size’:5 but the shadow doesn’t show up in any browser. What could cause this to happen?

  22. Pingback: 108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} – DESIGNTOOLEXPERT

  23. bruce lee says:

    Hello @all,
    thank you for the plugin. Is there a simple way how to disable the alphabetical sorting of the links?
    Greetings from Germany
    Bruce

  24. Awesome to see there is a version 2! I am still using the original jQuery Mega Menu, but I will update when I have enough time to sort out the CSS properly (I am using custom CSS to change the appearance).

  25. Pingback: Menu desplegable para paginas web con tablas, utilizando CSS y Jquery (Megamenu) | Photoshop y Tutoriales

  26. Aldo says:

    How come I can’t control click on a menu item link? How is it being disabled? Thanks!
    Aldo

  27. Aldo says:

    Why doesn’t Control Click work on the menu?

  28. Leon says:

    How would you close all drop down menus on an iPhone or iPad?

  29. Priya says:

    I am trying to incorporate megamenu in my website but it gives me error “uncaught type error object [object object] has no method ‘megamenu’” i tried everything but still i am getting this error. Can anyone help me and because of this my dropdown menu is not showing when i hover on menu item.

    Thanks in advance!!

  30. Pingback: 15 Super-Simple jQuery Menu and Navigation Plugins - Speckyboy Design Magazine

  31. Phil says:

    Menu works great until it responds, gets smaller and starts to take up two lines. When the menu is constricted and starts to take up two lines, the Mega menu dropdowns start to overlap top tier menu li’s that have wrapped to the second line and then two problems occur:

    1. Passing your mouse into the megamenu dropdown often takes you over these wrapped menu items and the megamenu dropdown immediately closes making it impossible to navigate.

    2. The top tier items that have wrapped to the second row, appear on top dropdown content fired by the top row.

    Setting the z-index on the dropdown div contained in the li and the UL doesn’t seem to fix this problem. I set the UL to z-index:1 and the div fired by the li to z-index:5 and nothing changed, the dropdown still displays under the li’s that have wrapped to the second line.

    Any suggestions?

  32. Shawn says:

    Any ideas on closing the mega menu on tablets? Once the menu is displayed there is no way to hide it. Nice plugin!

  33. Korsakov says:

    It would be great if you could offer the plugin without the sliding effect. Thanks!

  34. Eva says:

    i have used your mega menu on one of my websites where i have a slider and mega menu drop downs fall behind the slider when slider changes pictures and then falls back in front of it. Do you have an idea why?

    • jvilchis says:

      Eva – check the z-indexing, the slider should be at a lower z-index than the mega menu if you want it to display on top of the slider. Otherwise, do the opposite. I hope that helps.

  35. jvilchis says:

    one issue i’ve encountered is, when I apply the megamenu it works wonderful. However, every time I click on the menu, it scales the height of the drop down mega menu. Is there a way to avoid that from happening?

  36. Jon says:

    Such a shame that this plugin is not usable for mobile devices/tablets.

    You cannot close the megamenu down without clicking on a link to a new page.

  37. Pingback: 17 Useful jQuery Plugins to Improve the Look and Feel of Your Website

  38. David Duke says:

    Hello,

    Your megamenu is fantastic and works great.
    I am trying to figure out how to make the hide() have a delay. I would like to wait a second or two before the tab goes away if nothing is hovered.

    Thank you!

  39. Pingback: HelpWebDesigner » 40+ Free jQuery CSS Drop Down Navigation Menu

  40. Pingback: [RESOLVED]menu like this site | ASP Questions & Answers

Leave a Reply

Your email address will not be published. Required fields are marked *