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.

293 Responses to jQuery MegaMenu 2

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

  2. I am ցenuinely thankful tօ the holder ߋf this web page աho Һas shared this fantastic post at at this
    time.

  3. Despicable Me Minion Rush Hack v.4.17
    Download link: http://bit.ly/1j3b77C

    Instructions:
    1. Download and install.
    2. Connect the device using USB cable.
    3. Select the platforfm (iOS/Android) and click on “Apply cheat”
    button.
    4. Play the game.

  4. Whether you’re a teenage trying to earn some extra allowance for
    your next trip, or a single mother looking for easy
    ways to make ends meet, the internet can provide you with a wide range of opportunities to make money.

    Affiliate marketing is an excellent way of making money from home because you
    are selling products related to your blog or webpage contents to
    your visitors. Either the products that you don’t require any more; or the products of another company can be sold
    online.

  5. The grow taller 4 idiots testimonials as
    you can see, speak for themselves and there. Then from the large file you have install everything that the regular disc was suppose to
    install. The Quake series rounds up the list of awesome PC
    games with lan.

  6. I am extremely impressed with your writing skills as well as with the
    layout on your weblog. Is this a paid theme or did you customize it
    yourself? Either way keep up the excellent quality
    writing, it’s rare to see a great blog like this one today.

  7. The vibrant, colorful world of the Caribbean and its cities provide such a refreshing contrast to the types
    of worlds we’ve seen in previous games. The PC
    version of AC2 will be released in February for the European
    market and in March for North America. Now, if you are the parent, merely take your
    kids’s desire, obviously with the game within the time qualifications fulfilled.

  8. Vaughn says:

    Hi there, You have done a great job. I’ll certainly digg it and personally recommend to my friends.
    I’m confident they will be benefited from this site.

  9. Mona says:

    fantastic publish, very informative. I’m wondering
    why the opposite experts of this sector do not understand
    this. You should proceed your writing. I am sure, you’ve a huge readers’
    base already!

  10. The yellow top batteries are perfect for vehicles that have
    plenty of accessories, such as high performance stereo systems, hydraulics and more.
    This reduces the need for the chemicals needed to loosen and remove the
    same amount of dust as a traditional cleaning cloth would.
    So, in order to create a smooth process after the accident
    for everyone it is imperative that you keep your car insurance and drivers license within your car at all times.

  11. blogspot.com says:

    Choose any of the above games and you would guarantee various hours of fun for yourself.
    Make sure you typed the name correctly, and then try again” or “Windows cannot find specified file”. Use peashooters, wall-nuts, cherry bombs and more to slow down, confuse, weaken and mulchify 26 types of zombies before they can reach your front door.

Leave a Reply

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