jQuery Mega Menu
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
[...] Instructions and Demo [...]
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.
[...] jQuery Mega Menu [...]
[...] jQuery Mega MenujQueryを使った、見た目も動作もクールなドロップダウン型メガメニュー [...]
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.
[...] is a sequel to the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and [...]
I like web design a lot. Your website is very nice. Do you guys know any good web classes that I can take?
[...] jQuery Mega Menu [...]
[...] MegaMenu 2 of the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and usability, with a completely revamped JS and CSS [...]
[...] jQuery Mega Menu 项目主页 | jQuery Mega Menu 项目下载 | jQuery Mega Menu 中文支持 [...]