Categories
Javascript Programming

jQuery Mega Menu

jquery-megamenu-thumbnailThis is a simple jQuery based MegaMenu plugin.
Demo: Click Here
Download: Click Here

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:

    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: 
    First Mega Menu

    
  Menu Content goes here

Enjoy the plugin and do not forget to comment about it here.

158 replies on “jQuery Mega Menu”

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 ( https://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

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.

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?

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.

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

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

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?

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?

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?

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.

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

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*/
}

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.

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!
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.

You can use the mega menu like this for the width to be adjusted

$(“.MegaMenuLink”).megamenu(“.MegaMenuContent”, {
justify: “left”,
width: “850px” /// WIDTH TO BE ADJUSTED can be ‘auto’ also
});

I’m having a strange issue with IE7 since the latest jquery.menu.js update 1.2.1.

The last navigation element in my navigation bar is not dropping down. It works perfectly in IE8, Safari, Firefox and Chrome.

If anyone has a minute take a look at the page at http://www.vintageview.com/aboutvv/indextest.asp and let me know if you see anything out of the ordinary. I would greatly appreciate it.

Thanks

I checked it. Everything seems OK. The megamenu is working on IE6 as well. Please test it again there are some CSS errors in the page which breaks it in IE6, because of which we are not able to focus onto the last menu item. Its not a problem with the megamenu javascript or its implementation. Its a CSS error.

Hi there

I’m viewing your demo now and its not displaying at all in Chrome 3.0 and Firefox 3.5
Am I doing something wrong? Displays perfectly in IE.

This is strange. I thought generally all problems happen in IE :). But just check if all JS are loading in your chrome and FF3.5. It should work perfectly fine in all modern browsers.

Tres strange. Does seem to be working outside the company but not on my pc or anyone elses on the floor. shrug. How do I ensure the js is being cached here, any ideas?

//most frustrating as I spent a good long while working on this and styling and now it only works in IE. Very strange.

Its a great script but i need small change in it.

I need the submenu should be auto float..you know what i mean
First menu float to left after reaching to last item of the menu it float to right.

is this possible with this script.

if so it will help me alot.

thanks in advance

Has anyone come up with the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; Tablet PC 2.0; MS-RTC LM 8)
Timestamp: Tue, 16 Mar 2010 13:23:01 UTC

Message: ‘JSON’ is undefined
Line: 25
Char: 10
Code: 0
URI: jquery.megamenu.js

Any ideas?

Hi,

It a very helpful plugin for developing menu control.
But I’m facing one small issue with this MegaMenu.
I used java applets in my web pages and this menu go behind applet or not visible over applet. I tried too many thing but unable to fix this issue.

Please help

Reply

the same problem as sone mentioned earlier (February 16, 2010 at 3:26 am)

After implementing this menu for a client of mine, i also got trouble with the mousout with the top button in firefox, IE was ok, i had this problem with and without the hover plugin. I could fix this with the next solutions:

Around line 137

function MegaMenuMouseOut(ParentNodeNumber, MenuLinkClass, MenuContentClass){
alertTimerId = setTimeout( function() {
$(‘#MegaMenuContent’).hide();
$(‘#MegaMenuContentShadow’).hide();
}, 100);
var MenuLinkClass = (typeof(MenuLinkClass) == ‘undefined’) ? “.MegaMenuLink” : MenuLinkClass;
$(‘.’ + MenuLinkClass).eq(ParentNodeNumber).removeClass(MenuLinkClass + ‘Active’);
}

But, you also must clear the interval when the mouse hovers into the content of the menu item:

around line 123:

function MenuContentHoverIn(MenuLinkClass, ParentNodeNumber) {
clearTimeout(alertTimerId);
$(‘#MegaMenuContent’).show();
$(‘#MegaMenuContentShadow’).show();
$(‘.’ + MenuLinkClass).removeClass(MenuLinkClass + ‘Active’);
$(‘.’ + MenuLinkClass).eq(ParentNodeNumber).addClass(MenuLinkClass + ‘Active’);
}

Hope it solves some people problem when the mouse leaves the button and entering the content, the content is gone.

John.

Hello,

I am using megamenu and I have a problem with IE7 where the menu doesn’t drop down. It is working well on Firefox.
You can check on http://www.notreimmeuble.com
The “IMMEUBLE” item should reveal to sub-item.

If you have any idea?
thanks
Nicolas

Please check your markup for errors and any other javascripts which might be conflicting. The MegaMenu is tested with IE6/7/8 so should work fine if other js are not conflicting or when there are no markup errors.

Well this must be me not knowing how to make it work but I can’t find what is wrong and IE doesn’t give me a lot of information apart from a script error with a line and position.
I have tried with no other js, only jquery (1.4.1) and jquery.megamenu but it still doesn’t work.
I have tried on my login page (http://www.notreimmeuble.com/Login) which is simple and has no markup issue, but it doesn’t work
I have tried with jquery 1.3.2 but it doesn’t work (though the script error gives a differrent line and char)

Any clue would be welocom
Thanks
Nicolas
In addition I have realised that it doesn’t render properly in safari.

I have partly found the solution which was to upgrade to your 1.2.1 (I was in 1.2). This solved the problem with IE7, but I have still the issue with safari not rendering correctly.

Nicolas

You are right, I have tested my site with chrome and it renders like safari (not well ;)). This must have to do with my html/css.

I have tried the exact same megamenu css on my site but the problem is still there on safari/chrome. In fact when I hover a MegaMenuLink, it pushes the left part of the menu on the line below.
I don’t understand, your demo is working perfectly on safari/chrome and I don’t see html markup problems, I am about to give up.

Thanks for supporting me (and for your patience). I finally found what is wrong. There is an incompatibility with another .js file (jrails.js), but unfortunetaly I don’t know how to find what causes the incompatibility and I need to keep this js for the moment (it is used by a Rails plugin which allowed me to switch from prototype to jQuery without modifying all my code)

Any idea on how to find what causes this incompatibility?

Thanks
Nicolas

I found that jrails override some jquery function (slideDown, slideUp for instance). That causes the incompatibility. Need further testing, but I think I got it.

Thanks very much for your patience. You can delete my posts because I think I polluted your blog.

Nicolas

I need some help. Have downloaded your megamenu. I am in the process of writing a website for myself AND I am not a webmaster. Everything sofar works 100% – Auto Width. I really want to make it a defined width. Please be so kind as to help me solve this problem

I really love the look of the menu, but am trying to find a solution that relies strictly on Nested Unordered Lists.

Still Kudos on the nice looking design.

I love the megamenu and used it in a site that we just launched. There is however a big problem with printing webpages. In a printed version the megamenu code is spread all over the page just as it is before it is affected by the CSS. Any help would be appreciated. Thanks and cheers

Dear Devadatta, I like megamenu very much and able to use it on my site. Thanks for your great efforts. However, I noticed that it uses CPU a lot (especially on MSIE). It almost freezes my small and old computer. Can you advise how can I make it less CPU hungary, I can drop some feature like shadow and also could go for only auto width feature if possible. Please see it here (http://punjabichowk.com). Regards
Dharam

Hi Dharam,

Thanks for your appreciation. I see there is some flash content in you website along with the megamenu. MSIE6 will have problem if you have some javascript based animation along with some flash content. Firefox or Chrome or even MSIE8 will be absolutely ok with it though. I suggest you switch off the dropdown animation or remove some flash content selectively for IE users.

To switch off the animation replace all `slideDown(“fast”)` in the jquery.megamenu.js to `show()` only.

Regards,
GeekTantra

is there a way to setTimeout to delay the action of the dropdown when hovering over the parent elements?

Also is it possible to assign a single justify right to the furthest right element only?

Please advise.

And thanks for a great script.

Per your recommendation I have successfully added the jquery.hoverintent.js … For the right justification on the item most to the right … how would I declare this in the .css?

Do I need to add an additional class to the final div that contains the drop down elements? (ALUMNI, FRIENDS & ATHLETICS)

I attempted to write “position:relative; left:-200px” and this didn’t work.

is there some other css attribute I should be using?

http://www.yc.edu/webtools/secret/v4code/v9/index.html
http://www.yc.edu/webtools/secret/v4code/v9/stylesheets/slideshow.css

Hi.

Awesome script. Small issue I’m having though, is I cannot seem to set a background image in the #MegaMenuContent div, it only works with colors. Do you have any suggestions?

Thanks!

Love the script, but there is one thing that needs to be addressed. If you top menu is the width of the screen and your drop down on the last couple of menus are wider than one column. The menu is displayed off to the right. Is there any way to detect the screen edge and make the menu justify to the right just on the menus that don’t fit? I would like to use the auto width example, but because the last menu goes off the screen I am stuck using jkmegamenu.

Hello,

I was wondering if there is a way to make left menu entries expand to the right and right menu entries expand to the left.

Help would be appreciated.

Thank you,

Pedro

There are four ways of positioning. Defined Width left, Defined Width right, Auto width left, Auto width right. You can try them and see which one fits your case.

Thank you, but as far as I see that doesn’t answer my question. Is there a way to make left entries expand to the right AND right entries expand to the left? I know about those 4 options, I’m asking for a 5th one.

Pedro

Hey great menu, I really appreciate all the work guys like you put in to these and I intend to use it asap. I was just wondering a few things, if you would be able to help me…

a) Like Pedro has mentioned before me, is there a way to somehow have an auto width on the sub menu as well as align it to the left depending on which tab is being used. For example 1 of my menu items has enough sub items to warrant a set width (990px the full width of my site) and another 2 don’t, which make it look empty on the right hand side of the drop down when using a set width of 990px.

b) also like someone else has mentioned is there a way of setting a background image to the sub menu.

c)finally, is there a way to set a click function on the drop down so that it stays open when the mouse hovers away from the menu.

Thanks, for all your hard work. much appreciated.

Hi Niall,

Thanks for the appreciation.

The answers to your questions:
a) This feature is not there right now. But I intend to include it very soon in the next release of jQuery MegaMenu.
b) The background image can easily be set using the CSS classes in jquery.megamenu.css. You have to explore the combinations.
c) The click function needs only a small change in the megamenu code which is replace all existing .hover actions with .click.

I am planning to release a new version of the MegaMenu soon.

All the above features and more will be included in it. So keep following me to get latest updates.

Regards,
GeekTantra.

Thanks for the really fast response, and the support for this, it’s greatly appreciated.

I’ve managed to sort the back ground image situ and I’ve also followed what you’ve said regarding the click function and this has worked, however, is there a way to set the sub menu to hover in order to activate the sub menu but a click to close it.

i done currently done the following and it sets the activation to click and the deactivation to click.


// save the old jquery "hover" method
$.fn._hover = $.fn.click;

// jquery method
$.fn.hover = function( fn1, fn2, fn3 ) {
if ( fn3 ) this.bind('clickstart', fn1 ); // 3 args
if ( fn2 ) this.bind('clickend', fn3 ? fn3 : fn2 ); // 2+ args
return !fn1 ? this.trigger('click') // 0 args
: this.bind('click', fn3 ? fn2 : fn1 ); // 1+ args
};

Once again many thanks, if you can help me with this. I’ve referenced your website in the source. the website in which it is being developed in, is a redesign of jet2holidays.com in the UK, just in case you’re wondering, so when its live feel free to reference it on you’re site.

thanks Niall

I like web design a lot. Your website is very nice. Do you guys know any good web classes that I can take?

I’m too stupid to figure out how to actually install this. I’m not great with code. I’ve linked to the .js and the .css, but it’s not working. It just shows “First mega menu” and “menu content goes here” without any mouseover action. Help?

I’m having a problem in Firefox. The script hangs at line 44 (according to FF). Is anyone else having this problem? THeories about how to solve it?

Thanks a lot for the mega menu! It’s great!

What would be the best way to integrate this with Joomla?

Thanks!

Any solution to the diagonal problem? The mm_timeout only seems to cause a delay in how long to wait until the menu opens, but the menu closes instantly when the mouse moves off of it. This is an obvious problem when the menu is fairly tall and the user moves the mouse diagonally off of it for an instant as they try to select something in a wide megamenu item below.

Why are the down load files different than your source. I could only get this to work by not using what was n the ZIP but by grabbing the file you have on your demo page AND that generates two other megamenus. What the heck lol

A person essentially help to make seriously posts I would state. This is the very first time I frequented your website page and so far? I amazed with the analysis you made to create this particular put up amazing. Excellent job!

Thanks for posting this. It was helpful in understanding how the menus work and in building one for my site.

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.