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 was SO helpful! I do have one question though: if I want to make the menu only 850px wide (for instance), how can I make any of the drop-down menus right justify to the width instead of left justifying to the bottom of the navigation tab so it doesn’t extend beyond the 850px?
Hi Rachel,
Glad you found the plugin useful. So what I understand from your query is that you want a right justified mega menu. I added this option this morning. It is enabled in the version 1.2 of the mega-menu. Do have a look at the latest demo ( http://www.geektantra.com/projects/jquery-megamenu/ ). If you want your mega menu links to be right justified just declare the mega menu as below.
$(document).ready(function(){
$(“.MegaMenuLink”).megamenu(“.MegaMenuContent”, {
width: “850px”,
justify: “right”
});
});
Remember your css styling should justify the mega menu links to the right side in order for the menu to look good.
GeekTantra
Thanks for publishing your work.
What browsers are compatible with this?
Hi Colin,
I have tested it with Firefox 3.5, Chrome 4.0, IE6 and Opera 10. It works fine in these.
GeekTantra
Also, for anyone wishing to fine-tune the speed at which the menu’s drop down, just adjust lines 97 and 99 or jquery.megamenu.js.
Replace
$(“#MegaMenuContent”).slideDown(“fast”);
With
$(“#MegaMenuContent”).slideDown(100);
and then Replace
$(“#MegaMenuContentShadow”).slideDown(100);
With
$(“#MegaMenuContentShadow”).slideDown(100);
.. then you can increase / decrease the speed in milliseconds.
oops, replace
edit to my last reply:
and then Replace
$(”#MegaMenuContentShadow”).slideDown(“fast”);
How do you make it slide back up?
if it helps im looking to do something similar to this website…where the mega menu slides back up before another menu drops. http://www.hayneedle.com
Hey Sean,
Replace lines 116 and 117 replace with this:
$(‘#MegaMenuContent’).slideUp(“100″);
$(‘#MegaMenuContentShadow’).slideUp(“100″);
You can adjust the speed as needed.
After replacing lines 116 et 117, the submenus slide up as soon as my mouse leave the button. I can’t go select a submenu link.
Has any one a fix for that?
Tks
I also noticed if you mouse over the main links very quickly and land on “Normal Menu” one of the mega menu’s may stay dropped down. Any way to fix this bug?
This is because i have given a small latency in the time of hover and actual drop down. I checked http://www.hayneedle.com. Seems you have implemented your version of megamenu nicely.
Excellent solution. I used it to create a megamenu of my own. Was searching for some straightforward solution that works flawlessly in IE6 too. Glad my search ended here.
Thanks a lot.
Hi Chakshu,
Good to know that it helped you.
Regards,
GeekTantra
I’m having a strange IE6 problem where the dropdown menu contents (the #MegaMenuContent) becomes abnormally narrow on some of the items on the right.
I’ve attached a screenshot of the site in IE6:
http://www.salesworks.com/client/windsor/slice/ie6bug.png
You can view the live demo here:
http://www.salesworks.com/client/windsor/slice/homepage.html
Any ideas how to fix this?
Also, it’s working fine in FF & IE7+8 on the PC however in Firefox on the Mac the script is super laggy. When opened in Safari on the Mac it’s fine. Really odd..
Hi GeekTantra,
How do I make to remove the slide down effect? I’m trying to do something like the new Reuters website.
Thank you,
Pedro
Got it.
Just need to replace the slideDown() with show():
//$(“#MegaMenuContent”).slideDown(“fast”);
$(“#MegaMenuContent”).show();
//$(“#MegaMenuContentShadow”).slideDown(“fast”);
$(“#MegaMenuContentShadow”).show();
Thank you.
Have you made an implementation where a menu content doesn’t go past the width of the container? For example, expanding far right menu content to the left?
Pedro
Hi,
I want the linkable subitems just as in hayneedle.com i.e. when I mouseover on first link subcategory will get opened.
Thanks
hi,
anybody there,,,,,,,,please help I need this on urgent basis tried a lot but unable to do it.
kindly help.
Just wondering – the code seems to be needing a parent div with class=”MegaMenu”. Or am I missing something?
If so, how would you implement more MegaMenus on the page (and of course they have individual styles, so they can’t share the same css style)?
Having 27 various styles for the megamenu css structure is ridiculous. It takes a lot of time to hack through what belongs to what in the menulistmenufootmenutablemenulistlimenuheadmenucontentlimenu
MenuEveryVariationOfMenuPossibleToNameMyCss
Great concept, but it could be radically simplified in its style setup.
Hi Jonathan,
I had added some frills like a drop shadow and did quiet a bit of styling of the inner contents. I do agree the styling can be improved a lot. Thanks for the comment.
Regards,
GeekTantra
[...] jQuery Mega-Menu with slide-down effects [...]
Do you have a version without the shadowing?
Hi GeekTantra,
The submenu divs go beyond the main div border. Could you give me a suggestion of how to fix this issue?
Here’s my implementation: http://www.thechinaguide.com/tcg2/megamenu.php.
Pedro
[...] jQuery Mega-Menu with slide-down effects [...]
[...] jQuery Mega-Menu with slide-down effects [...]
Hi,
i’d like to know how I can make the menu slide up again.
I tried the tip, replacing line 116 and 117 with
$(‘#MegaMenuContent’).slideUp(“100″);
$(‘#MegaMenuContentShadow’).slideUp(“100″);
but then i’ve got the problem that I can’t select any submenu, because it slides up when I leave the top button.
How to solve this problem?
Hi Sone,
You can give the slide with a timeout using the setTimeout method. That should solve the problem.
Regards,
GeekTantra
I don’t understand this one.
How helps a timeout on this, if it also slides up when I enter the menuContent?
Could you explain that please?
Still din’t find a solution for this, anyone can help?
And second question:
i’d like to slide down the menu only if the user remains >=0.5 secons on the menu, so it won’t slide down if you just move the mouse through the site.
Is there a way to do this?
You can use the hoverIntent jQuery plugin for this.
http://cherne.net/brian/resources/
Regards,
GeekTantra
Thanks, delay on mouseover works fine, but now i’ve got the same problem as if i use .slideUp() instead of .hide()
Hi, your example page works fine on IE8. But, whenever I hover over the link, it does not drop down the menu at all. In fact, it does the same thing this person’s does: http://www.thechinaguide.com/tcg2/megamenu.php , except mine isn’t showing a Javascript error.
When I open the example page, IE warns me about running scripts or ActiveX controls that could access my computer. Do you know why IE would warn me about this? Or do you know what the problem would be causing my IE not to display the menu when FF 3.6, Chrome 4.0beta, Safari 4, etc. all display it without issue? Thanks in advance.
Hi Waylon,
I guess there is some flash content or any other ActiveX component on your page which causes the error. You have to debug it by taking parts of the pages and testing it one by one. I had tested it on IE 6. Try the megamenu example in IE6.
Regards,
GeekTantra
Hi, I was able to fix the problem by having the Mega Menu scripts load last. Now I am having another problem that I’m troubleshooting. Since I’ve done that, it does not work with Safari on the Mac. Yet it works fine in Google Chrome. Do you have any idea what would cause this? Basically, what happens is when I hover over it, it does not load anything in Safari.
Hi, I actually figured it out. Replacing href=”javascript:void(0);” with href=”#” onclick=”aFunction();return false;” solved the problem.
This is perfect for what I was looking for, thank you for sharing it.
I’ve just got one slight glitch – I’ve got a 2px margin between the tabs. In FF and Safari it displays fine, however in IE7/8 it appears to default to about 7-10px and I can’t get them closer together no matter what I try. Any ideas?
The tabs are display: inline-block; so the distance is actually a space which is there between the tabs. This causes the difference in IE and Firefox. You can solve the problem by removing spaces or newlines between the tabs links and giving them margins of your wish.
Hi,
I still didn’t figure out how to solve the problem with the slideUp option. It always slides up when i enter the menu. You says something about a timer, but how can this help?
Thanks for reply.
To solve this problem you have something known as HoverIntent plugin. It should work out fine. Please check out Hover Intent’s Website to know more about it. (http://cherne.net/brian/resources/)
Hi,
Thanks for reply, but you gave mit that site earlier. I’m using hoverIntent since then, but it does not solve the problem. It just slides up a little bit later, after entering the menu, but it still does not “wait” until i leave the whole menu.
Any other idea?
Tanks.
Hi
I would like this menu to slide up. Similar to the following site, demo.gavick.com.
How would I be able to do this?
Hi chris,
You can easily do the same by just tweaking a small part of the code.
In jquery.megamenu.js just change
Line: 108
$(“#MegaMenuContent,#MegaMenuContentShadow”).mouseout(function(){
$(“#MegaMenuContent”).hide()
$(“#MegaMenuContentShadow”).hide()
$(‘.’ + MenuLinkClass).removeClass(MenuLinkClass + ‘Active’);
});
to:
$(“#MegaMenuContent,#MegaMenuContentShadow”).mouseout(function(){
$(“#MegaMenuContentShadow”).hide()
$(“#MegaMenuContent”).slideUp(“slow”)
$(‘.’ + MenuLinkClass).removeClass(MenuLinkClass + ‘Active’);
});
Hope this helps.
Regards,
GeekTantra
It was interesting to read this article and I hope to read a new article about this subject in your site in the near time.
Nice menu! Thanks
In the Mega Menu drop down I have a link. I have tried adding a color to a:hover within the appropriate class for a rollover color, but the megamenu.js seems to strip it out. Any workaround?
Hi Chris,
To change the background of the a:hover change the background of a.MegaMenuLinkActive:link, a.MegaMenuLinkActive:visited, a.MegaMenuLinkActive:hover.
That should to the trick.
Regards,
GeekTantra
I may just be dense, but I can’t figure out how to individually control where the MegaMenuContent div appears.
The problem I’m having is that the last 2 items in my horizontal list of menu items have somewhat wide dropdown MegaMenus, and if they’re left-aligned, as I have the rest of them, it overshoots the container by quite a bit. The menu items on the left have plenty of space so it’s not an issue. I tried putting inline “margin-left” code at the far-right MegaMenuContent, but it didn’t work. Interestingly, I can move them ALL if I mess with the original style sheet by changing margin-left, but it’s only the two MegaMenuContents on the far right that I want to slide over the left a couple hundred pixels.
Is that possible?
Hi Brian,
Seems I got your problem. You need to use the entire menu area and align the megamenu asper the position of the parent item. Currently its not an integrated feature. But since its an interesting I will tweak the code for that feature and get back to you.
Regards,
GeekTantra.
Thank you! The Mega Menu is exactly what I’ve been looking for, and I’ve pretty much got it set up except for that ONE detail. Thanks!
What I meant by the above request is that I have a child text link INSIDE the .MegaMenuContent (The drop down) Your example does not have a rollover/hover text color for child navigation links and when I apply a color like this…
.MegaMenu .MegaMenuContent a:hover {
color: #5a6c3f;
text-decoration: underline;
}
It does not work. I tried your recommendation. See below:
.MegaMenu a.MegaMenuLinkActive:hover {
color: #5a6c3f;
text-decoration: underline;
}
And still no avail. I can style the color of the child links just not the a:hover color.
Any thoughts?
Thanks
You can style the child links according to your choice by the following styling
#MegaMenuContent a:link,#MegaMenuContent a:visited {
color: #888; /*Normal color*/
}
#MegaMenuContent a:hover {
color: #000; /*Rollover color*/
}
[..] A bit unrelated, but I totally liked this website post [..]
[...] jQuery Mega Menu [...]
I just wanted to say this is exactly what I’ve been looking for. Thanks for all of the hard work that must have gone into creating this menu. One question though… Is there a way to make the menu expand on click instead of hover?
Thanks Again.
Hi Dodgson,
You can change the event trigger from hover to click in the code itself. It shouldn’t take much time.
Thanks for the quick response. I have taken a look throught the jquery.megamenu.js file and only found one instance of hover. I tried changing it to “click”, however it didn’t work. Any suggestions would be greatly appreciated.
Hi while changing the “hover” to “click” remove the second function() inside the hover statement. It should work fine.
Hi!
I played around with your megamenu and it looks good!
But where do you set the menu to stick to the top of the page? Is it posible to add the menu to another placement on the site?
Example of order of elements (vertical): Searchbar, bannerimage, megamenu, content.
No specific hight on those div’s. But if not possible a absolute height position could do it.
Thanks!
Thank you for the great mega menu!! I am very new to CSS and JQuery and I do not know where to change the width to be auto instead of fixed. Can you please help. Thank you.
I am new to CSS and jquery and I have not found where I change the with from a fixed width to auto. Can you please point me in the right direction. Thank you.