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.

159 Responses to jQuery Mega Menu

  1. Pingback: 13个绚丽的Jquery 界面设计 | HuDu个人Blog

  2. rohith says:

    Good plugin but i get a jquery conflict in some of my pages.how can i remove this

  3. Mulli says:

    Hi.
    Nice work, works just fine in LTR and RTL.

    How do I add singletone elements – like “home” that has no DIV under it?
    I tried removing the div – but than on mouse-out event the item is still highligted.

    Is there a simple way to resolve it?
    Thanks

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

  5. games says:

    very nice menu thank you

  6. Pingback: jQuery Mega Menu集合 | 我的舞台|网站模板|PSD模板|CSS模板|Flash模板|Html5+Css3模板

  7. Pingback: jQuery MegaMenu 2 | WDToolbox - Web Designer & Developer's Toolbox

  8. Felipe Lima says:

    Thank you! Good and functional plugin ; )
    A hug from Brazil!

  9. Pingback: 15 Super-Simple jQuery Menu and Navigation Plugins

  10. Parthavi says:

    How will I include an image in menu?

  11. Adrianna says:

    It’s hard to find your website in google. I found it on 17 spot, you should build quality
    backlinks , it will help you to increase traffic. I know how to help you, just search in google – k2 seo tips
    and tricks

Leave a Reply

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