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
- A completely revamped JS and CSS code-base.
- Easier to use. (A lot simpler HTML and JS needs to be used to initiate the menu)
- Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple
- Customizable menu activation and deactivation actions. Now you can choose to activate the menu by click or by mouseover
- HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
- Automatic alignment of the menu content according to the width of the parent menu container.
- Variable width of the menu contents.
- 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:
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:
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:
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:
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.
Pingback: 17 Useful jQuery Plugins to Improve the Look and Feel of Your Website
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.
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.”
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/
Pingback: mega-menu | J a m o B l o g
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?
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
Pingback: MKFMN › jQuery MegaMenu
Can you also build hierarchical menus with it?
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?
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.
Pingback: jQuery Mega Menu集合 | ~SolagirL~
Pingback: Refreshi Weblog | News and Inspiration » 28 Best jQuery and JS plugins for your website’s presence
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).
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!
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.
Here you will find free scripts with demonstration
http://55points.blogspot.com/
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.
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?
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.
My menu is still drifting to the right. There ar no attributes in the body tag. Has anyone else had this issue?
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’.
very nice menu i love it thanks
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?
Pingback: 108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} – DESIGNTOOLEXPERT
very good
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
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).
Pingback: Menu desplegable para paginas web con tablas, utilizando CSS y Jquery (Megamenu) | Photoshop y Tutoriales