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.
HI,
I think center alignment is what people here ask most. and I, myself, have no idea to get it to work as well. I need the menu system centered like http://www.godaddy.com and i know it must have something to do with the jquery but i’m not sure how to adjust it.
Maybe you should allow to declare how much left or right users want to adjust
like
jQuery(“.megamenu”).megamenu({ ‘justify’: ‘right’, ‘justifyspace’: ’20′ });
btw, it’d be nice if you put Twitter follow me to the right side of this web, it’s hard to read when it hinders the view on the left
)
Hi,
The case you are looking for has to adjusted from the CSS styling. It shouldn’t be very difficult to achieve it.
Thanks for the suggestion. Just changed the twitter badge direction
.
Regards,
GeekTantra
What exactly needs to be changed to get the full menu effect without the alignment of the submenu being off centered. I tried setting the width of the submenus to the width of the menu but it resulted in in the submenu being off centered.
Please help!
You can center the submenu with negative margins in your CSS. Just add “margin-left: -(half the width of submenu)px;” to your style for the menu and you’re good.
Hey,
Awesome script, just wondering how to add a current feature on to it, like i.e. if the li id=”current” to display that div or the “content in the dropdown” to display and not disappear when hovered on (just for that page it’s currently on). Suggestions? I’ve been racking my brain all week.
Hi,
You can do it by hacking into the plugin core script. Just use a class=”current” for your menu item then go to line 115 of jquery.megamenu.js (http://www.geektantra.com/projects/jquery-megamenu-2/javascripts/jquery.megamenu.js) and put the switch case block inside an if condition checking if the current menu item doesn’t have class current it should be
if(!jQuery(this).hasClass(“current”)) {
…. the switch case statement goes here …
}
I guess the above will do the trick for your case.
Regards,
GeekTantra
What exactly needs to be changed to get the full menu effect without the alignment of the submenu being off centered. I tried setting the width of the submenus to the width of the menu but it resulted in in the submenu being off centered.
Hi – Can you give an example of the switch case statement needed to setup the class=”current” feature in the jquery.megamenu.js file? Actually, I would need one for id=”current”. Thanks!
Hi Sam,
For checking id instead of class just use the condition jQuery(this).attr(“id”) == “current”. Actually the switch case statement is already there in the core code. You just need to encapsulate that part inside your conditional. If you go to line 117 of view-source:http://www.geektantra.com/projects/jquery-megamenu-2/javascripts/jquery.megamenu.js you should be able to see the switch-case statement that I have mentioned.
Regards,
GeekTantra
I want to know the last BUG repair not
Pingback: jQuery MegaMenu 2 – menu które wiele pomieści :) | Taipa.pl
Hi i have a dropdown box with a submit button within one of the menus and am unable to choose another item in the dropdown as the menu fades out before i can do anything. Is there anything i can adjust within the show/hide so that a dropdown box can work? thank you very much.
“with quiet a lot of changes” -> “with qui*te* a lot of changes”
First of all this jQuery plug-in is best i found on the net. i have 2 questions.
1. How to create multiple megaMenu in one page? What i want is that: 1 mega menu on left floated and another right floated on the same line.
2. i want to have another jquery plugin called colorbox on some menu’s but it conflicts.
please reply
Hi,
The mega-menu plugin should easily work on multiple instances. Just you have to use a jQuery(
).each and instantiate the menu. If you can send me link of you implementation I can check where exactly its conflicting with colorbox plugin.
Regards,
GeekTantra
Pingback: Tools to build a monster website with no money « 64 Square Feet
Hi, is there any workaround to embed this menu inside relative positioned div?
IMHO not being able to add menu inside relative positioned div is a HUGE drawback. Demo layout is using table but most of the websites today are table-less and relative divs are necessary for positioning elements. It would be great if next menu revision could be independent from parent div.
I second that! Love the plugin, but it would be much better if it it could be housed in a div doing the same thing as the table (fixed width; auto margins).
Hi Giuliano and rickibarnes,
If you observe the example carefully, the table wrapper is given only to give the page a 100% height. The megamenu is completely independent of the wrapper of-course. You can try the megamenu without a table as wrapper also it should work completely fine.
Regards,
GeekTantra
Great plugin! I’m working to implement this in a website with long lists of categorized submenu items (dynamically generated from a CMS.
Since the menu list could frequently change, I’d like to divide those category submenu items into columns dynamically
Here’s a sample of the menu hierarchy:
Discover [main menu item]
* What is a Township [category]
o History of Township [sub-menu item]
o Where is Township[sub-menu item]
o Roads & Bridges[sub-menu item]
* Elected Officials [category]
o Trustees [sub-menu item]
o Fiscal Officer [sub-menu item]
* Information & News [category] [NEW COLUMN?]
o Preparedness [sub-menu item]
o Community Bulletin Board [sub-menu item]
+ Archive of Past Issues [sub-sub-menu item]
o Newsletter [sub-menu item]
o Press Room [sub-menu item]
+ Press Releases [sub-sub-menu item]
+ Annual Report [sub-sub-menu item]
+ Meeting Minutes [sub-sub-menu item]
+ Legal Notices [sub-sub-menu item]
+ Request for Proposal [sub-sub-menu item]
* Staff [category]
o Directory [sub-menu item]
* Boards & Commissions [category]
I’d like to make the height of the displayed mega menu large enough to accomodate all category & submenu items in multiple columns, then wrap a category to the top of the next column when the list exceeds the height of the menu. I’m drawing a blank on ideas of how to do this.
I’m thinking if I get a total count of categories, and a count of sub-menu items, I could divide the totals into columns? I’m trying to figure out how to logically break the columns (I don’t want to continue a category from one column to another).
Any help/thoughts are greatly appreciated.
Hi Sherm Stevens,
It is quite difficult to understand the scenario from the comment. Please send in a link to the current implementation to help me understand the scenario.
Regards,
GeekTantra
GT,
What I’m trying to do is to split a list dynamically generated by a content management system into columns. Using your plugin manually, it’s easy, not so easy with a dynamic list.
I’ve found one solution is to incorporate another jQuery plugin, easyListSplitter written by Andrea Cima Serniotti (http://www.madeincima.eu) to do the work for me. Using this plugin, I am able to dynamically append a classname to the list items, allowing me to style & position them with CSS.
I’m still troubleshooting, when I get it completed I’ll post the link. But thanks for your quick reply.
Sherm Stevens
http://www.invision-studios.com
Hi Sherm Stevens,
You can use the list-splitter inside the megamenu content. I guess it should work fine. Do let me know if you face any problem.
Regards,
GeekTantra
GT,
I am running into a strange problem using the list splitter plugin. I’m calling the list splitter with a separate .ready(function()) AFTER the megamenu, all in the same .js file.
It works except for one major issue: the right side of the mm no longer stays within the boundaries on the right (for a left justified menu).
It seems like there is a point in your megamenu script that I should call the splitter, but I’m baffled where that could be. That would be when the mm is being formed, not after (as I’m doing now). Any suggestions?
I’ll be happy to send you my code, just too much for posting here.
Sherm Stevens
http://www.invision-studios.com
GK,
I’ve abandoned use of the list splitter. Totally not necessary, as all it does is find an element in the DOM and adds a class, then the class is formatted with CSS. I can accomplish the same thing using a slightly modified version of your code.
I would like to make a small change, perhaps you can suggest a method.
I’d like to be able to shift the menu that pops up to the left, or even center it in the window. Any suggestions?
Sherm Stevens
http://www.invision-studios.com
Pingback: Simple jQuery Menu and Navigation « CSS & JQuery Sample - FreshDesignWeb
Pingback: 15 Super-Simple jQuery Menu and Navigation Plugins | Android
Giuliano:
Very good script, but i had the same BIG problem.
I replaced the word “offset” to “position” in the .js, it works for me now.
Not tested very well, but could be a starting point for you.
Hi Deeep,
Thank you for reporting that you had a problem. If you could describe the exact problem it would be extremely helpful for me to review the script.
Regards,
GeekTantra
hi
My problem is the same, as for Giuliano November 19, 2010 at 3:32 am.
If i put the menu inside relative positioned div, the “dropdown” is not in “good place”. (it is far to the right, not where it should be)
i saw this in your script:
‘top’: ($mm_item_link.offset().top + $mm_item_link.outerHeight()) – 1 +”px”,
I never used jquery, but help “google”, if searched what “offset” is, and changed to “position”:
‘top’: ($mm_item_link.position().top + $mm_item_link.outerHeight()) – 1 +”px”,
So, i gave a try, and searching for a quick solution i replaced all “offset” to “position”, now it works fine for me in a relative positioned div. (Not examined, what the code does, and not tested very well, but it could be a starting point.)
Regards,
deeep
Thanks то deep, for solution! Respect to GeekTantra for script.
Pingback: jQuery MegaMenu 2 | WDToolbox - Web Designer & Developer's Toolbox
Hi,
First a big thank you for this beautiful script.
Unfortunately, I came across a weird and pesky bug: Into the menu, I added a select input with a dozen of options. It works great in IE 8+9, in Chrome and Safari, however on Firefox, when selecting a value, the select form closes before the mouse even reaches some of the lower values and the expanded megamenu goes back into it’s default state (meaning it closes the menu again).
Do you have an idea what could trigger this in Firefox (and how to prevent this?)
THanks for your help!
Markus
Unfortunately, I don’t have yet a working example online.
Hi Markus,
Can you send me a working example for me to check the bug?
Regards,
GeekTantra
Can We implement overlay effect like…this..
http://tympanus.net/Tutorials/OverlayEffectMenu/
if is so please mail me…
So much thanks for your menu…
Hi Vincent,
The overlay effect can be implemented by editing the script. But we do not intend to add the feature to the megamenu.
Regards,
GeekTantra
Pingback: 15 Super-Simple jQuery Menu and Navigation Plugins | My Blog
I am probably missing something obvious, but I would like to add a transparent background to the drop down content and for the life of me, I can’t figure it out.
Sorry to bother you, just figured it out…
Pingback: Raccolta di risorse gratuite jQuery per web designer e sviluppatori web.
Pingback: Top 20 jQuery CSS Drop Down Menus | webtrendset
Hi Guys-
If I want to use a background image for the MMContent section, how can I do that? I set the background css property to an image but it repeated itself even though i told it not to.
Hi James,
You can use the css important marker to force CSS values. Usage
background: url() no-repeat top center !important;
That should fix your issue.
Regards,
GeekTantra
Pingback: jQuery MegaMenu 2 – Drop Down Menüs mit jQuery | tagdocs.de
Pingback: 20+ Awesome jQuery Powered Web Site Navigation Scripts - tripwire magazine
Hi,
This script is awesome. I could find a lot of uses for it, but I just encountered a problem.
I’m facing a strange problem regarding two megamenus. Suppose I take the example demo given on this page, duplicate the megamenu i.e. one below the other, then change the color of all the top entries of the lower menu to something dark :
Tabular Content
We have two megamenus. When the upper megamenu is triggered, the text of the lower one appears in the menu, as if the menu is transparent. The menu overlay is not transparent for any other elements.
I need two megamenus for a fancy app I’m setting up (the first is part of a help menu, on top, the second, part of a toolbar (somewhat like a ribbon bar, but not that fancy). Hope you can help. Thanks.
ps: I tried to put in html
<a href=”javascript:void(0)” style=”color:#000;font-weight:bold”>Tabular Content</a>
hope this works
Hi Rtvik,
I would suggest you instantiate two different megamenus with different css class names. That would ensure there is no conflict between the two.
Regards,
GeekTantra
I’ve just tried this. Two classes : megamenu1 and megamenu2. I even tried duplicating the css for both. Doesn’t work
I’ve also tried changes in css, like changing opacity etc. The menu is transparent only for another megamenu, not other elements. Perhaps the other megamenu redraws it’s entries while the first one is functioning, and should be disabled and enabled accordingly. I’m no whiz at javascript/jquery to fix that though.
Is it possible to have a drop-up menu? With the menu appearing above, sliding upward?
Pingback: 『RT』一些必看的jQuery导航插件和教程 « Nick zheng ™
Great script, in my case the menu should deactivate on click, it works fine, but the problem is once i will open an menu, then if i will click on the second menu (li), the first menu (li) is still open and it does not close, it closes only if i will click out side the menu. So now it is overlapping the menu which is already opened.
Please guide.
Hi BlueUnicorn,
The problem is taken care of in the plugin. Please check your implementation. A link to your implementation could help.
Regards,
GeekTantra.
How would I go about having the menus pop-out to the right of the respective element? I removed the css float:justify option from the jQuery file so the list items would be stacked on top of one another.
Is it possible to have the current primary category highlighted, if you are viewing any page within that category?
For example, if my headings were HOME LESSONS QUIZES
and LESSONS had sub pages Math, Reading, Science, Geography,
I’d like LESSONS to be highlighted if the user was viewing any of the pages Math, Reading, Science, or Geography.
Is there a way to do that?
Hi Brian,
This can be easily done by adding a CSS class to the corresponding heading when the corresponding page is open and defining the CSS accordningly.
Regards,
GeekTantra
I keep getting an error in Line 51 and the menus don’t want to display at all in Firefox. Help?
Julie – did you ever resolve your problem? If so, how? I’m having the same problem in firefox. In Chrome is shows the entire menu at once. Safari seems to work ok.
Hello, I’m having trouble making the links on the menu. For some reason, I can’t use CRTL+click on the menu. In the demo, there aren’t any click-able links so I’m not sure if links are supposed to work in the menu.
Is it possible to adjust the hover timeout? I’ve implemented a megamenu with “simple” show/hide options – in this case the hover state has an annoying delay.
Another question: all menu items are styled as tabs. How can we style menu items that do not have a drop down (like “Home”) differently?
Many thanks.
Thanx for ypur great job!
Same problem as BlueUnicorn: on click menu deactivates but if i will click on the second menu (li), the first menu (li) is still open and it does not close, it closes only if i will click out side the menu. Any fix? Thanx.
Sorry: “…on click menu _A_ctivates…”
Is it possible to create a vertical menu (with a certain width)? Is there an easy modification to allow this?
This is great! I have one question: Is there any way to slow down the slideup movement of the form in google chrome? The slideup is so quick that you are unable to enter information into the form. This is occuring on the demo page not with anything I have developed.
Pingback: 爱J2EE » 转载自JavaEye：一些必看的jQuery导航插件和教程(仅供自我学习，建立资料库)
this is not working in ie
Hi,
As a HTML beginner I have found this verz great mmegamenu. Unfortunatelz I have the next problem with it.
I have downloaded the yio file and followed zour instruction”
Usage:
■In the header section of the HTML add the following:
■Next in your body add the following code:
You can see the result at http://kismalac.freeweb.hu/index.html.
Let me know pls. where is the problem.
Thank you very much for your help in adavance.
Emőke
it appears that stopPropagation has some issues with ctrl+click in Firefox. personally, I use the middle mouse button, but this was driving some of my users nuts after I decided to adopt your menu system for my web site. I wasn’t sure it was stopPropagation’s fault for sure until, after searching for a solution to my ctrl+click problems, I discovered this article:
http://e-mats.org/2010/03/unbreak-my-hea-firefox-ctrl-click-please/
I adapted his solution to work with your megamenu code. the key is here…
jQuery(document).bind(‘click’, function(e){
// — start of new code —
if(inner_click)
{
inner_click = false;
return true;
}
// — end of new code —
jQuery(‘a.mm-item-link’).removeClass(‘mm-item-link-hover’);
jQuery(‘div.mm-item-content’).hide();
});
… along with replacing all instances of “e.stopPropagation();” with “inner_click = true;”
First of all, thanks for nice and lite stuff.
In IE7, the subnav flashes multiple times and closes itself. I tried some css modifications but no luck.
Any ideas?
http://goo.gl/IFKxf
In the other haven’t surprised, and in обще it was pleasant, likely it is uneasy
I renew my question hoping anyone can answer. Thanx.
“Onclick” menu activates but if i will click on, it does not close. Any fix?
Same problem as BlueUnicorn (for the deactivate_action)
I think I solved it by using megamenu v1, it may be useful to someone:
in the file “jquery.megamenu.js”:
1) I clear the deactivate_action option (deactivate_action: “”,)
2) In the “activate_action” function, I added this:
// code
var mm_sub1 = jQuery(document).find(“#sub1″);
mm_sub1.css({
‘display’: ‘none’
})
//
“#sub1″ = I added this ID to the div with class “mm-item-content” generated
When I click on a different menu item the submenu opened –> closes automatically
Bye
also:
for(i=1;i<=MENU_ITEM_LENGHT;i++){
var mm_sub = jQuery(document).find("#sub" + i);
mm_sub.css({
'display': 'none'
})
}
Hi Alexio, does it work on MM v2 too?
Pingback: jquery menu drop down with tutorial | Technoweblog
is it possible to call and run megamenu from a different URL? I am working on a site where a third party needs to link to the javascript on my server. It works well and as expected everywhere but IE7 – where it causes crashes.
Is there a security issue in the script?
Thank you.
Brenda