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.
Thank you awesome
I got this error message with Chrome.
Uncaught TypeError: Cannot read property ‘top’ of null
clearTimeout($mm_timer);
$mm_timer = setTimeout(function(){ //Emulate HoverIntent
mm_item_link_obj.addClass(“mm-item-link-hover”);
mm_item_content_obj.css({
‘top’: ($mm_item_link.position().top + $mm_item_link.outerHeight()) – 1 +”px”,
Pingback: jQuery MegaMenu 2 | minvision
Hey, great script. I’ve already integrate the menu into my app and been playing with it. I’ve got one question is that how can I add a submenu that that would slide out when the cursor hovers on the item of the dropdown menu. thx
Hi, Great instructions and code, I was able to slip my table in easy as.
Question: If I have a Table.html file that I want to use as a Drop-Down, how do I call that HTML page in your code?
So instead of having the code for each menu item inside default.html, each Drop-Down Item calls a specific HTML page which loads on hover…
Any suggestions?
Thanks,
Brett
I’ve been trying some megamenu method, but this one so far is the best for me. I’ll make it in next redesign. thanks Geektantra
Thx for this great Menu.
But is there a way to get it drop”UP” and not drop”down” ???
Thx for Help.
Hi there,
I’m experiencing an issue where the contents of the mega menu briefly show up on the page during load. Once loaded, the menu acts as it should.
Any help would be much appreciated.
Thanks!
Nathan
Hi.
Thank you for this useful menus. But I have problem same as Rtvik’s.
I’ve tried to adjust z-index property, but didn’t work how I intended.
Please tell any helps or advices.
Great menu. The only issue is that it should be keyboard accessible. a basic requirement for commercial sites, at least in the U.S. (Americans with Disabilities Act). It shouldn’t be too hard to make it keyboard accessible, though. The dropdown should appear either with a mouseover or when the parent link is active. Once the dropdown is visible, the user should be able to tab through it.
Hi
I am trying to achieve a 100% width div on the drop down. I tried tampering with the CSS without any luck. The div shifts completely to the left, stretching to the right side of the body and misses to fill the whole screen when I choose 100% for the Div’s width.
Would appreciate it if you could guide me, where I should be looking at that for that adjustment.
Hi ,
We are trying to use this menu, however the div content shifts to the right and also there is alot of space between the li and the div , you can check it here http://c6.tktools.jp/
On doing
ul.megamenu div.mm-item-content {
background: #FFF;
padding: 0px;
position: absolute;
border: 1px solid #777;
z-index: 9;
margin-left:-381px;
}
the div moves to the right but still the space between the li and the div still remain.
Any help would be highly appreciated.
I am building a Drupal module that utilizes this script and I am experiencing a similar issue. The javascript calculation of the position of the mm-item-content div is way off. PM me for location and access.
Cheers,
Antoine
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.
Problem you have is because your menu or some of the parent divs are positioned absolute or relative.
Hope this helps.
Hi,
First of all thx for MegaMenu 2.
Sorry for this support like question, but I cant figure out how to configure MegaMenu 2 ‘deactivate_action’ to deactivate the pop up when the user ‘clicks outside’ of the poped up area, and not just leaving hover.
What I’ve figured so far that deactivate_action should be the literal name of the javascript event, so possibly I must modify the code to achieve this desired behavior, just don’t know how…
Thx for the help in advance.
Hi,
thanks for this great piece of code. It works fine for me on http://burg.cx.
Only thing is if I apply vtip (a tooltip script) the menu fades out if hovering from one item to another instead of staying open.
Cheers Thomas
Hi everyone
Please i am working on a website and i have been trying to have a mega menu embedded in it. How can i integrate Jquery mega menu to a Joomla site?
This s a great plugin, but I’m experiencing two issues. This is vanilla installation of MegaMenu2.
1) The dropdown element is pushing the rest of the page content down when it is revealed.
2) I can’t seem to have downdown menu items, only blocks of content like tables and such. Are nested lists supported for menu items?
Hi,
I was having a similar issue with you (2). When trying to use a dropdown (select) menu inside this mega menu, the menu closing again before being able to choose something (in IE7). In other browsers you have to keep your mouse clicked down to choose.
I overcame this by unbinding the mouseleave event when focusing on the select menu, and binding again upon focusout & change of the select box. I got the tip from here: http://stackoverflow.com/questions/6212309/problem-with-jquery-mouseleave-firing-when-container-has-select-box
Hi everyone
Could anybody help me out and explain why in IE7 my menu drops down but only half the content shows. If I then move my cursor into the menu area the other half renders?
Big thanks in advance,
Dom
Just to repeat the 100% width request. This was a feature of previous versions so I’m not sure why it’s been lost.
hey Geeks,
Nice and clean plugin. I am using it. I would like to know more about the usage of nested Ajax calls in the dropdown menu.
Please let me know if you get time..
thanks again
raghav
Great menu, I’m going to try to incorporate into my current theme….although the way it’s setup is pretty weird..
can you please explain how to create a delay when the mouse leaves the box?
Hi,
Very nice mega menu. I ve tried it on my website but when mouse is over the menu the dropdown box associated is displayed but not just bellow the first link and it the same for the other one.
Someone could help me?
Thanks a lot
I’m using Mega menu in my website. It’s great. I’m trying to ad a jQuery content slider and for some reason menu’s drop down behind the slider not over it.
Can anyone help?
Thanks
Fantastic beat ! I wish to apprentice whilst you amend your site, how could i subscribe for a weblog site? The account helped me a appropriate deal. I have been tiny bit familiar of this your broadcast provided brilliant transparent idea
Heya. i have tried installing your plugin from the joomla menu, both as uploading packagefile and Install from Directory but it wont install it proper.
tried with version 2.0 and 2.1
also just copied it to the plugins directory, but again nothing works :S
Hi and thanks for sharing this awesome script.
One Question:
Is there a easy way to let it slide the other way…
I meen a DropUp and not to DropDown
Thx.
Pingback: 17 Useful jQuery Plugins to Improve the Look and Feel of Your Website - DesignModo
Hi, I would appreciate if someone could tell me the answer. I really need to configure some of the values, but i’m not good at script ;/
1. When i add a form inside the , how do you stop the form from going away because sometimes, the drop just vanish by accidentally mouse hover out ? how do you make the drop disappear if it sense someone has already type a value , for instance half way typing his username at a username input text field?
2. how do you slow down the animation?
Thanks!!
Sorry, there is some mistake in my typing
1. When i add a form inside the , how do you stop the form from going away because sometimes, the drop just vanish by accidentally mouse hover out ? how do you make the drop NOT disappear if someone has already typed in a value, lets say half way typing his username at a username input text field?
Hi, is there a way to add delay so that sub-menu doesn’t hide when mouse leaves parent menu accidently. This should be something similar to setTimeout on hover just for hover out. Thanks.
nice work!!!
Pingback: Notes: Navigation Menus and Panels | CW Cage
Dont send form. Why?
What’s the license? Is it open source?
How do you allow right click of links in the menu? I need to be able to allow the user to right click and open in a new tab
Pingback: もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ | Webクリエイターボックス
Has anyone had any trouble with this menu when it is viewed on an iPad? On other sites I have built, the iPad automatically converts the hover state to a click state so that the nav menu can be accessed on the touch based device. With this plugin however, it does not appear to work. When the user touches the main nav item, it attempts to follow the link rather than opening the menu. I need to find a solution to this. Any advice would be appreciated.
Thanks!
How to hide the menu when the user clicks a link inside a megamenu content?
I am using iframes, so the megamenu shoud hide by yourself after click a link.
Thanks.
Hi,
nice and good-working megamenu, just missing a parameter to set a delay, while some user not knowing to go directly down with there mouse and with this forcing the menu to close.
Best regards
Boris
Hi!
Great script! It does exactly what I was looking for! If only I could do some fixes… sorry I suck at coding and stuff!
So, here it is my question.
I’m using the script on my home page: http://www.koti.it
As others experienced, the is not aligned to the as it should. I’ve tried the fix suggested by Giuliano and replaced “offset” with “position” in the “jquery.megamenu.js” file. In this way the menus get aligned correctly but I loose the neat “slide all the content down” effect.
I don’t know if someone could help… I’m this close to what I want!
Thanks for the help and for the great work!
Riccardo
Ok, figured out why it wasn’t correctly aligning before and now it’s fixed, but, again, no more “slide down all the content” effect…
Ok, I finally settled for the overlapping option.
Here is my website: http://www.koti.it
Still, if somebody knows how to enable the sliding content option I’m looking forward to it!
Riccardo