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.

162 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. 谢谢,真心不错!

  6. games says:

    very nice menu thank you

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

  8. Tran Sy Dung says:

    please send me this your menu

    thanks & best regards

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

  10. Pingback: jQuery Mega Menu – tạo menu cho website theo cách chuyên nghiệp | Blog CNTT Hà Nam

  11. Felipe Lima says:

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

  12. Pingback: 便利なJavascript UIのご紹介 | Sakanaya_tarohの日記

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

  14. Parthavi says:

    How will I include an image in menu?

Leave a Reply

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