A new version is available at
http://www.geektantra.com/2010/05/jquery-megamenu-2/
http://www.geektantra.com/2010/05/jquery-megamenu-2/
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.
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
Safari and Chrome render almost similar. I checked it with chrome. It works Ok. Please recheck.
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.
Hi,
I am trying it on chrome. Everything looks fine except the alignment. Please recheck your CSS again. Try making your markup css W3C valid. Most of the problems get sorted by that.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Use the chrome DOM inspector to sort the problem as well and don’t give up.
Regards,
GeekTantra
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
Nice to know that you got your problem resolved.
Regards,
Devadatta
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
Hi Kurt,
Adjust the menu in your printable css i.e.
Give display:none to the menu in print.css.
Regards,
GeekTantra
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
Thank you GeekTantra, I highly appreciate your input and let you know after experineting with it. Regards, Dharam
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.
Hi jerry,
You can use the HoverIntent jQuery plugin to avoid this problem. The justification can be adjusted from the jquery.megamenu.css.
Regards,
GeekTantra
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
A wonderful job. Super helpful ifonmrtaion.
Pingback: jQuery Mega Menu Plugin | reADactor
How did you implement the hoverintent menu? Can you provide code sample? thx
Someone can you please respond to this comment? I am having the same difficulties.
You can find the logic starting from line number 49 in http://www.geektantra.com/projects/jquery-megamenu-2/javascripts/jquery.megamenu.js
Great article, I was actually looking for a mega menu tutorial. Thanks for sharing.
Thanks for the appreciation.
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!
You can ignore my comment, got it figured out. Thanks.
Pingback: 12 Helpful jQuery Plugins to Check Before Ending April 2010 | AEXT.NET MAGAZINE
Pingback: 2010年の間に見ておきたいjQueryプラグイン12 / TEL CREATIVE DATABASE 人の手が繋ぐクリエイティブデータベースプロジェクト
JQuery Megamenu plugin rocks
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
Please check http://www.geektantra.com/2010/05/jquery-mega-menu-2/ It has all the features you want to use.
Pingback: jQuery MegaMenu 2 | GeekTantra
I like web design a lot. Your website is very nice. Do you guys know any good web classes that I can take?
Pingback: jQuery Mega Drop Down Menus - Small Roundup | Kreative Garden
Pingback: jQuery MegaMenu Plugin ver.2
Pingback: jQuery Mega Menu 开源项目 - Ajax代码大全 - Java开源项目 - Menu - Java免费软件 - jQuery-Mega-Menu - 菜单控件 - 开源网
Hello,
I noticed that I be in conflict with a menu javascripts, namely this:
https://ota.cartrawler.com/cartrawlercustomabe/abe/js/ct_abe.js
can you help?
Here you can see the conflict: http://www.microdirect.eu/sito/auto.php
Hello thanks
Pingback: Simple jQuery Menu and Navigation « CSS & JQuery Sample - FreshDesignWeb
Hi!
Do you have any tutorial how to implement mega menu in wordpress.
Thanks a lot
Dario
Croatia
Thanks for such great information. Mind if I make a post about it on my blog?
Pretty good. Love the demo version !!!
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?
How can this be integrate into Joomla?
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 for the Mega Menu, its really sexy and good menu.
Pingback: jQuery MegaMenu 2 | The Ultimate jQuery List
Like the mega menu and useful information, I’ve also just created mega drop down menu using drupal module, can view here http://www.victheme.com/search/node/mega%20menu
Any comments are welcome:)
Hi,
wicked menu, could this be inplemented with an e-commerce site called nopCommerce:
http://www.nopcommerce.com
thank you.
How i use jquerry?
Thanks a lot for the mega menu! It’s great!
What would be the best way to integrate this with Joomla?
Thanks!
Awesome. this has saved me so much time.
Thanks dear this really very nice help.
Thanks for sharing with us.
Great menu, thanks for sharing!
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
This really saves time, thanks man
Pingback: [jQuery]：主菜单下显示各分类目录列表「Mega Menu」 | LIFE IS FUN
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!