jQuery Mega Menu

The other day I was searching for a jQuery based MegaMenu over google but couldn’t find any good plugin for the same so sat down and wrote one for myself. Here is a simple jQuery plugin to create an unbloated MegaMenu in seconds.

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

Usage:
  • In your header section add the following:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="javascripts/jquery.megamenu.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".MegaMenuLink").megamenu(".MegaMenuContent", {
            width: "900px"
        });
    });
    </script>

    We can replace MegaMenuLink with the class of the menu links and MegaMenuContent with the class of the menu content. To have a flexible width of the megamenu just disable the width options or set width:”auto”.

  • Next in your body add the following code:
    <a class="MegaMenuLink" href="javascript:void(0)">First Mega Menu</a>
    <div class="MegaMenuContent">
      Menu Content goes here
    </div>

Enjoy the plugin and do not forget to comment about it here.

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

146 Responses to jQuery Mega Menu

  1. Nicolas says:

    Well this must be me not knowing how to make it work but I can’t find what is wrong and IE doesn’t give me a lot of information apart from a script error with a line and position.
    I have tried with no other js, only jquery (1.4.1) and jquery.megamenu but it still doesn’t work.
    I have tried on my login page (http://www.notreimmeuble.com/Login) which is simple and has no markup issue, but it doesn’t work
    I have tried with jquery 1.3.2 but it doesn’t work (though the script error gives a differrent line and char)

    Any clue would be welocom
    Thanks
    Nicolas
    In addition I have realised that it doesn’t render properly in safari.

  2. Nicolas says:

    I have partly found the solution which was to upgrade to your 1.2.1 (I was in 1.2). This solved the problem with IE7, but I have still the issue with safari not rendering correctly.

    Nicolas

  3. Nicolas says:

    You are right, I have tested my site with chrome and it renders like safari (not well ;) ). This must have to do with my html/css.

  4. Nicolas says:

    I have tried the exact same megamenu css on my site but the problem is still there on safari/chrome. In fact when I hover a MegaMenuLink, it pushes the left part of the menu on the line below.
    I don’t understand, your demo is working perfectly on safari/chrome and I don’t see html markup problems, I am about to give up.

  5. Nicolas says:

    Thanks for supporting me (and for your patience). I finally found what is wrong. There is an incompatibility with another .js file (jrails.js), but unfortunetaly I don’t know how to find what causes the incompatibility and I need to keep this js for the moment (it is used by a Rails plugin which allowed me to switch from prototype to jQuery without modifying all my code)

    Any idea on how to find what causes this incompatibility?

    Thanks
    Nicolas

  6. Nicolas says:

    I found that jrails override some jquery function (slideDown, slideUp for instance). That causes the incompatibility. Need further testing, but I think I got it.

    Thanks very much for your patience. You can delete my posts because I think I polluted your blog.

    Nicolas

  7. I need some help. Have downloaded your megamenu. I am in the process of writing a website for myself AND I am not a webmaster. Everything sofar works 100% – Auto Width. I really want to make it a defined width. Please be so kind as to help me solve this problem

  8. Phil says:

    I really love the look of the menu, but am trying to find a solution that relies strictly on Nested Unordered Lists.

    Still Kudos on the nice looking design.

  9. Kurt Johns says:

    I love the megamenu and used it in a site that we just launched. There is however a big problem with printing webpages. In a printed version the megamenu code is spread all over the page just as it is before it is affected by the CSS. Any help would be appreciated. Thanks and cheers

  10. Dharam says:

    Dear Devadatta, I like megamenu very much and able to use it on my site. Thanks for your great efforts. However, I noticed that it uses CPU a lot (especially on MSIE). It almost freezes my small and old computer. Can you advise how can I make it less CPU hungary, I can drop some feature like shadow and also could go for only auto width feature if possible. Please see it here (http://punjabichowk.com). Regards
    Dharam

    • GeekTantra says:

      Hi Dharam,

      Thanks for your appreciation. I see there is some flash content in you website along with the megamenu. MSIE6 will have problem if you have some javascript based animation along with some flash content. Firefox or Chrome or even MSIE8 will be absolutely ok with it though. I suggest you switch off the dropdown animation or remove some flash content selectively for IE users.

      To switch off the animation replace all `slideDown(“fast”)` in the jquery.megamenu.js to `show()` only.

      Regards,
      GeekTantra

  11. jerry says:

    is there a way to setTimeout to delay the action of the dropdown when hovering over the parent elements?

    Also is it possible to assign a single justify right to the furthest right element only?

    Please advise.

    And thanks for a great script.

  12. Pingback: jQuery Mega Menu Plugin | reADactor

  13. Alex Flueras says:

    Great article, I was actually looking for a mega menu tutorial. Thanks for sharing.

  14. Marcel says:

    Hi.

    Awesome script. Small issue I’m having though, is I cannot seem to set a background image in the #MegaMenuContent div, it only works with colors. Do you have any suggestions?

    Thanks!

  15. Marcel says:

    You can ignore my comment, got it figured out. Thanks.

  16. Pingback: 12 Helpful jQuery Plugins to Check Before Ending April 2010 | AEXT.NET MAGAZINE

  17. Pingback: 2010年の間に見ておきたいjQueryプラグイン12 / TEL CREATIVE DATABASE 人の手が繋ぐクリエイティブデータベースプロジェクト

  18. dpk says:

    JQuery Megamenu plugin rocks

  19. David says:

    Love the script, but there is one thing that needs to be addressed. If you top menu is the width of the screen and your drop down on the last couple of menus are wider than one column. The menu is displayed off to the right. Is there any way to detect the screen edge and make the menu justify to the right just on the menus that don’t fit? I would like to use the auto width example, but because the last menu goes off the screen I am stuck using jkmegamenu.

  20. Pedro says:

    Hello,

    I was wondering if there is a way to make left menu entries expand to the right and right menu entries expand to the left.

    Help would be appreciated.

    Thank you,

    Pedro

    • GeekTantra says:

      There are four ways of positioning. Defined Width left, Defined Width right, Auto width left, Auto width right. You can try them and see which one fits your case.

      • Pedro says:

        Thank you, but as far as I see that doesn’t answer my question. Is there a way to make left entries expand to the right AND right entries expand to the left? I know about those 4 options, I’m asking for a 5th one.

        Pedro

  21. Niall says:

    Hey great menu, I really appreciate all the work guys like you put in to these and I intend to use it asap. I was just wondering a few things, if you would be able to help me…

    a) Like Pedro has mentioned before me, is there a way to somehow have an auto width on the sub menu as well as align it to the left depending on which tab is being used. For example 1 of my menu items has enough sub items to warrant a set width (990px the full width of my site) and another 2 don’t, which make it look empty on the right hand side of the drop down when using a set width of 990px.

    b) also like someone else has mentioned is there a way of setting a background image to the sub menu.

    c)finally, is there a way to set a click function on the drop down so that it stays open when the mouse hovers away from the menu.

    Thanks, for all your hard work. much appreciated.

    • GeekTantra says:

      Hi Niall,

      Thanks for the appreciation.

      The answers to your questions:
      a) This feature is not there right now. But I intend to include it very soon in the next release of jQuery MegaMenu.
      b) The background image can easily be set using the CSS classes in jquery.megamenu.css. You have to explore the combinations.
      c) The click function needs only a small change in the megamenu code which is replace all existing .hover actions with .click.

      I am planning to release a new version of the MegaMenu soon.

      All the above features and more will be included in it. So keep following me to get latest updates.

      Regards,
      GeekTantra.

  22. Niall says:

    Thanks for the really fast response, and the support for this, it’s greatly appreciated.

    I’ve managed to sort the back ground image situ and I’ve also followed what you’ve said regarding the click function and this has worked, however, is there a way to set the sub menu to hover in order to activate the sub menu but a click to close it.

    i done currently done the following and it sets the activation to click and the deactivation to click.


    // save the old jquery "hover" method
    $.fn._hover = $.fn.click;

    // jquery method
    $.fn.hover = function( fn1, fn2, fn3 ) {
    if ( fn3 ) this.bind('clickstart', fn1 ); // 3 args
    if ( fn2 ) this.bind('clickend', fn3 ? fn3 : fn2 ); // 2+ args
    return !fn1 ? this.trigger('click') // 0 args
    : this.bind('click', fn3 ? fn2 : fn1 ); // 1+ args
    };

    Once again many thanks, if you can help me with this. I’ve referenced your website in the source. the website in which it is being developed in, is a redesign of jet2holidays.com in the UK, just in case you’re wondering, so when its live feel free to reference it on you’re site.

    thanks Niall

  23. Pingback: jQuery MegaMenu 2 | GeekTantra

  24. Remona Cathers says:

    I like web design a lot. Your website is very nice. Do you guys know any good web classes that I can take?

  25. Pingback: jQuery Mega Drop Down Menus - Small Roundup | Kreative Garden

  26. Pingback: jQuery MegaMenu Plugin ver.2

  27. Pingback: jQuery Mega Menu 开源项目 - Ajax代码大全 - Java开源项目 - Menu - Java免费软件 - jQuery-Mega-Menu - 菜单控件 - 开源网

  28. Andrea says:

    Hello,
    I noticed that I be in conflict with a menu javascripts, namely this:

    https://ota.cartrawler.com/cartrawlercustomabe/abe/js/ct_abe.js

    can you help?
    Here you can see the conflict: http://www.microdirect.eu/sito/auto.php

    Hello thanks

  29. Pingback: Simple jQuery Menu and Navigation « CSS & JQuery Sample - FreshDesignWeb

  30. Dario says:

    Hi!
    Do you have any tutorial how to implement mega menu in wordpress.
    Thanks a lot
    Dario
    Croatia

  31. car speakers says:

    Thanks for such great information. Mind if I make a post about it on my blog?

  32. Virak says:

    Pretty good. Love the demo version !!!

  33. Julie says:

    I’m too stupid to figure out how to actually install this. I’m not great with code. I’ve linked to the .js and the .css, but it’s not working. It just shows “First mega menu” and “menu content goes here” without any mouseover action. Help?

  34. indiekid says:

    How can this be integrate into Joomla?

  35. Jen says:

    I’m having a problem in Firefox. The script hangs at line 44 (according to FF). Is anyone else having this problem? THeories about how to solve it?

  36. Thanks for the Mega Menu, its really sexy and good menu.

  37. Pingback: jQuery MegaMenu 2 | The Ultimate jQuery List

  38. VicTheme says:

    Like the mega menu and useful information, I’ve also just created mega drop down menu using drupal module, can view here http://www.victheme.com/search/node/mega%20menu

    Any comments are welcome:)

  39. garrie says:

    Hi,

    wicked menu, could this be inplemented with an e-commerce site called nopCommerce:

    http://www.nopcommerce.com

    thank you.

  40. Amit Khaitan says:

    How i use jquerry?

  41. Mark O'Keeffe says:

    Thanks a lot for the mega menu! It’s great!

    What would be the best way to integrate this with Joomla?

    Thanks!

  42. Jhon says:

    Awesome. this has saved me so much time.
    Thanks dear this really very nice help.

    Thanks for sharing with us.

  43. Seo says:

    Great menu, thanks for sharing!

  44. Erik says:

    Any solution to the diagonal problem? The mm_timeout only seems to cause a delay in how long to wait until the menu opens, but the menu closes instantly when the mouse moves off of it. This is an obvious problem when the menu is fairly tall and the user moves the mouse diagonally off of it for an instant as they try to select something in a wide megamenu item below.

  45. Scott says:

    Why are the down load files different than your source. I could only get this to work by not using what was n the ZIP but by grabbing the file you have on your demo page AND that generates two other megamenus. What the heck lol

  46. This really saves time, thanks man :)

  47. Pingback: [jQuery]:主菜单下显示各分类目录列表「Mega Menu」 | LIFE IS FUN

  48. A person essentially help to make seriously posts I would state. This is the very first time I frequented your website page and so far? I amazed with the analysis you made to create this particular put up amazing. Excellent job!

Leave a Reply

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

*