jQuery Mega Menu

Home / Javascript
11September

jQuery Mega Menu

About the Author

Comments

    Rachel - October 4, 2009

    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?

    Reply
    GeekTantra - October 5, 2009

    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

    Reply
    Colin - October 8, 2009

    Thanks for publishing your work.

    What browsers are compatible with this?

    Reply
      GeekTantra - October 8, 2009

      Hi Colin,

      I have tested it with Firefox 3.5, Chrome 4.0, IE6 and Opera 10. It works fine in these.

      GeekTantra

      Reply
    Colin - October 8, 2009

    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.

    Reply
      Colin - October 8, 2009

      oops, replace

      edit to my last reply:
      and then Replace
      $(”#MegaMenuContentShadow”).slideDown("fast");

      Reply
    Sean - October 19, 2009

    How do you make it slide back up?

    Reply
    Sean - October 19, 2009

    if it helps im looking to do something similar to this website...where the mega menu slides back up before another menu drops. www.hayneedle.com

    Reply
      Nate - November 3, 2009

      Hey Sean,

      Replace lines 116 and 117 replace with this:

      $('#MegaMenuContent').slideUp("100");
      $('#MegaMenuContentShadow').slideUp("100");

      You can adjust the speed as needed.

      Reply
        Julien - January 13, 2010

        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

        Reply
    Sean - October 19, 2009

    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?

    Reply
      GeekTantra - October 19, 2009

      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.

      Reply
    Chakshu - October 21, 2009

    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.

    Reply
      GeekTantra - October 21, 2009

      Hi Chakshu,

      Good to know that it helped you.

      Regards,
      GeekTantra

      Reply
    Colin - October 27, 2009

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

    Reply
    Pedro - December 7, 2009

    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

    Reply
    Pedro - December 7, 2009

    Got it.

    Just need to replace the slideDown() with show():

    //$("#MegaMenuContent").slideDown("fast");
    $("#MegaMenuContent").show();

    //$("#MegaMenuContentShadow").slideDown("fast");
    $("#MegaMenuContentShadow").show();

    Thank you.

    Reply
    Pedro - December 14, 2009

    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

    Reply
    kuku - December 14, 2009

    Hi,
    I want the linkable subitems just as in hayneedle.com i.e. when I mouseover on first link subcategory will get opened.

    Thanks

    Reply
    kuku - December 14, 2009

    hi,
    anybody there,,,,,,,,please help I need this on urgent basis tried a lot but unable to do it.
    kindly help.

    Reply
    Dusan - December 16, 2009

    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)?

    Reply
    Jonathan - January 6, 2010

    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.

    Reply
      GeekTantra - January 9, 2010

      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

      Reply
    Jason - January 12, 2010

    Do you have a version without the shadowing?

    Reply
    Pedro - January 12, 2010

    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

    Reply
    sone - February 16, 2010

    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?

    Reply
      GeekTantra - February 16, 2010

      Hi Sone,

      You can give the slide with a timeout using the setTimeout method. That should solve the problem.

      Regards,
      GeekTantra

      Reply
        sone - February 16, 2010

        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?

        Reply
          sone - February 17, 2010

          Still din't find a solution for this, anyone can help?

          Reply
    sone - February 16, 2010

    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?

    Reply
      GeekTantra - February 16, 2010

      You can use the hoverIntent jQuery plugin for this.

      http://cherne.net/brian/resources/

      Regards,
      GeekTantra

      Reply
        sone - February 16, 2010

        Thanks, delay on mouseover works fine, but now i've got the same problem as if i use .slideUp() instead of .hide()

        Reply
    Waylon - February 17, 2010

    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.

    Reply
    GeekTantra - February 17, 2010

    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

    Reply
    Waylon - February 18, 2010

    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.

    Reply
    Waylon - February 18, 2010

    Hi, I actually figured it out. Replacing href="javascript:void(0);" with href="#" onclick="aFunction();return false;" solved the problem.

    Reply
    Neil - February 23, 2010

    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?

    Reply
      GeekTantra - February 24, 2010

      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.

      Reply
    sone - February 23, 2010

    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.

    Reply
      GeekTantra - February 24, 2010

      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/)

      Reply
        sone - February 24, 2010

        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.

        Reply
    Chris - March 1, 2010

    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?

    Reply
      GeekTantra - March 1, 2010

      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

      Reply
    Elena - March 1, 2010

    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.

    Reply
    SM - March 2, 2010

    Nice menu! Thanks

    Reply
    Chris - March 4, 2010

    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?

    Reply
      GeekTantra - March 4, 2010

      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

      Reply
    Bryan - March 5, 2010

    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?

    Reply
      GeekTantra - March 5, 2010

      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.

      Reply
        Bryan - March 5, 2010

        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!

        Reply
    Chris - March 5, 2010

    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

    Reply
      GeekTantra - March 5, 2010

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

      Reply
    Celina Roefaro - March 5, 2010

    [..] A bit unrelated, but I totally liked this website post [..]

    Reply
    Dodgson - March 8, 2010

    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.

    Reply
      GeekTantra - March 8, 2010

      Hi Dodgson,

      You can change the event trigger from hover to click in the code itself. It shouldn't take much time.

      Reply
    Dodgson - March 9, 2010

    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.

    Reply
      GeekTantra - March 9, 2010

      Hi while changing the "hover" to "click" remove the second function() inside the hover statement. It should work fine.

      Reply
    Snak - March 9, 2010

    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!

    Reply
    Christy - March 11, 2010

    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.

    Reply
    Christy - March 11, 2010

    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.

    Reply
      GeekTantra - March 11, 2010

      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
      });

      Reply
    Chris - March 11, 2010

    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

    Reply
      GeekTantra - March 11, 2010

      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.

      Reply
        Chris - March 13, 2010

        Thanks. I appreciate it. That helps me narrow down the issue.

        Reply
    Alister - March 12, 2010

    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.

    Reply
      GeekTantra - March 12, 2010

      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.

      Reply
        Alister - March 12, 2010

        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.

        Reply
          GeekTantra - March 12, 2010

          You can clear your cache completely and try again.

          Reply
            Alister - March 12, 2010

            Yeah I tried that, still no luck GT. Works great in IE, no such thing in Chrome & FF.

            What I did just do now was save:
            http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

            Dumped it in my directory and called it from there. Seems to be working in all browsers now. So for some reason it wasn't reading/caching the js in that url

            /shrug

            Thx for all your efforts though.

            Reply
    Infernodeep - March 15, 2010

    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

    Reply
    Alister - March 16, 2010

    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?

    Reply
    Mrinal - March 22, 2010

    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

    Reply
    John - April 4, 2010

    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.

    Reply
    Nicolas - April 7, 2010

    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

    Reply
      GeekTantra - April 7, 2010

      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.

      Reply
    Nicolas - April 7, 2010

    Thanks,

    I am going to recheck my markup.

    Reply
    Nicolas - April 8, 2010

    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.

    Reply
    Nicolas - April 8, 2010

    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

    Reply
      GeekTantra - April 8, 2010

      Safari and Chrome render almost similar. I checked it with chrome. It works Ok. Please recheck.

      Reply
    Nicolas - April 9, 2010

    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.

    Reply
    Nicolas - April 9, 2010

    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.

    Reply
      GeekTantra - April 10, 2010

      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

      Reply
    Nicolas - April 10, 2010

    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

    Reply
    Nicolas - April 10, 2010

    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

    Reply
      GeekTantra - April 11, 2010

      Nice to know that you got your problem resolved.

      Regards,
      Devadatta

      Reply
    Deon van Rensburg - April 12, 2010

    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

    Reply
    Phil - April 23, 2010

    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.

    Reply
    Kurt Johns - April 23, 2010

    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

    Reply
      GeekTantra - April 23, 2010

      Hi Kurt,

      Adjust the menu in your printable css i.e.

      Give display:none to the menu in print.css.

      Regards,
      GeekTantra

      Reply
    Dharam - April 27, 2010

    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

    Reply
      GeekTantra - April 27, 2010

      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

      Reply
        Dharam - April 28, 2010

        Thank you GeekTantra, I highly appreciate your input and let you know after experineting with it. Regards, Dharam

        Reply
    jerry - April 27, 2010

    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.

    Reply
      GeekTantra - April 28, 2010

      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

      Reply
        jerry - April 28, 2010

        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

        Reply
          Disney - August 20, 2011

          A wonderful job. Super helpful ifonmrtaion.

          Reply
    Alex Flueras - April 29, 2010

    Great article, I was actually looking for a mega menu tutorial. Thanks for sharing.

    Reply
    Marcel - April 29, 2010

    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!

    Reply
    Marcel - April 29, 2010

    You can ignore my comment, got it figured out. Thanks.

    Reply
    dpk - May 4, 2010

    JQuery Megamenu plugin rocks

    Reply
    David - May 5, 2010

    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.

    Reply
    Pedro - May 7, 2010

    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

    Reply
      GeekTantra - May 7, 2010

      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.

      Reply
        Pedro - May 7, 2010

        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

        Reply
    Niall - May 12, 2010

    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.

    Reply
      GeekTantra - May 12, 2010

      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.

      Reply
    Niall - May 13, 2010

    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

    Reply
      GeekTantra - May 17, 2010

      Please check http://www.geektantra.com/2010/05/jquery-mega-menu-2/ It has all the features you want to use.

      Reply
    Remona Cathers - May 17, 2010

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

    Reply
    Andrea - July 29, 2010

    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

    Reply
    Dario - December 5, 2010

    Hi!
    Do you have any tutorial how to implement mega menu in wordpress.
    Thanks a lot
    Dario
    Croatia

    Reply
    car speakers - December 7, 2010

    Thanks for such great information. Mind if I make a post about it on my blog?

    Reply
    Virak - January 13, 2011

    Pretty good. Love the demo version !!!

    Reply
    Julie - January 19, 2011

    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?

    Reply
    indiekid - January 31, 2011

    How can this be integrate into Joomla?

    Reply
    Jen - February 11, 2011

    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?

    Reply
    Web design company india - April 11, 2011

    Thanks for the Mega Menu, its really sexy and good menu.

    Reply
    VicTheme - May 29, 2011

    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:)

    Reply
    garrie - May 29, 2011

    Hi,

    wicked menu, could this be inplemented with an e-commerce site called nopCommerce:

    http://www.nopcommerce.com

    thank you.

    Reply
    Amit Khaitan - June 29, 2011

    How i use jquerry?

    Reply
    Mark O'Keeffe - July 7, 2011

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

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

    Thanks!

    Reply
    Jhon - August 24, 2011

    Awesome. this has saved me so much time.
    Thanks dear this really very nice help.

    Thanks for sharing with us.

    Reply
    Seo - October 12, 2011

    Great menu, thanks for sharing!

    Reply
    Erik - November 17, 2011

    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.

    Reply
    Scott - November 25, 2011

    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

    Reply
    Izrada web Stranica - December 14, 2011

    This really saves time, thanks man :)

    Reply
    sajta | sajtova - January 2, 2012

    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!

    Reply
    Stephen - April 3, 2012

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

    Reply
    rohith - July 14, 2012

    Good plugin but i get a jquery conflict in some of my pages.how can i remove this

    Reply
    Mulli - July 29, 2012

    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

    Reply
    games - November 12, 2012

    very nice menu thank you

    Reply
    Felipe Lima - April 10, 2013

    Thank you! Good and functional plugin ; )
    A hug from Brazil!

    Reply
    Parthavi - December 4, 2013

    How will I include an image in menu?

    Reply
    dave - May 2, 2011

    How did you implement the hoverintent menu? Can you provide code sample? thx

    Reply
    Honest - September 7, 2011

    Someone can you please respond to this comment? I am having the same difficulties.

    Reply
    GeekTantra - September 10, 2011

    You can find the logic starting from line number 49 in http://www.geektantra.com/projects/jquery-megamenu-2/javascripts/jquery.megamenu.js

    Reply

Leave a Comment

Notify me of followup comments via e-mail

Get Adobe Flash player