Themeforest

jQuery Plugin – Mega Drop Down Menu

Further to our release of the new drop down mega menu Wordpress plugin last week we have now set up the jQuery plugin code that was used to create the Wordpress widget.

The plugin will create drop down mega menus from any standard nested HTML lists.

Full details on how to use the plugin can be found at – jQuery Mega Drop Down Menu Plugin.

24 Comments

  • Hi there,

    How can I do if my menu is dynamically-generated, like in a Joomla site? Is there any simple method to achieve this? Thanks in advance, great work.

    Pierre

    • Hi,

      How the menu is generated is not important for the jquery plugin as long as the menu structure follows a standard html nested list

  • Great stuff. Thanks.

    Is it possible to slide up on click as my menu is on the footer. I am able to get the subs to appear above the links however as it looks little odd as its’ sliding in from top to bottom. Any thoghts?

    Thanks

    • Hi,

      The current plugin doesnt have that feature unfortunately

  • I need to left align the drop down with the left edge of the parent item, the drop down appears to expand left below the parent item. thank you

    • Hi,

      Currently the positioning is dynamically set by the menu based on the position of the parent item and the width of the sub menu.

      • Hi Lee

        Thanks for your reply. Is there any cjhanger i can make to the css/Jquery that will align the left margin of the drop down with the parent menu item’s left margin? Thanks for your assistance.

      • this code corrects the left alignment in the jQuery file:

        var ml = mr < ml ? ml – mr : ml;

        (instead of this)

        //var ml = mr < ml ? ml + ml – mr : (totiw – pw);

  • Thanks but it still drops down for a split second whenever I select a menu item.

    • Hi,

      That is the page reloading. Unfortunately jquery cant initialise until all elements are already available. sometimes this may result in a flash of unstyled content depending on what else is loading on the page and where its positioned

      • Actaully your solution of this did work. thx. One other question – i need to make the menu 30px in height, currently it is 41px, is this possible to make the ul 30px in height. i tried but the i could not make the ul items 30px in height. your help would be appreciated – thanks again. V

        #nav li ul, #nav .sub {display: none;}
        #nav .sub ul {display: block;}

  • I agree that there is some delay in the menu being rendered in IE but seems ok in FF. Can you suggest a way to remove this as it causes the page to drop down then up each time you select a new menu. Otherwise its a really neat bit of code – thx

    • Hi,

      You can try the following CSS to help hide the menu whilst it is initialising:

      #nav li ul, #nav .sub {display: none;}
      #nav .sub ul {display: block;}
      

      Change the “#nav” to be the same as your actual menu

  • Please disregard my previous comment – I have resolved the bulk of the issues. There is apparently some conflict with my other style sheet on the page.

    There is however a bug I found.
    The sub menu will not lay on top of an .swf movie in any browser exept IE. I have a (flash) slideshow embeded in and object tag in my page – it sits immediately below the menu, When I hover to open the menu, it is not revealed (it is covered by the slideshow)

    For now – I will place the menu below my slideshow – but would appreciate a fix.

    Regards,
    Chad

    • Hi,

      Unfortunately it isnt a bug. Flash pretty much sits on top of everything due to the way it works. Try setting the wmode parameter of the flash object to transparent or opaque. Sometimes this helps

      • Thanks – sorry for the delayed reply.

        For those that run into this – the issue of the menu not sitting on top of an .swf file is not an issue.

        I had set the parameters in the object tag, but not the embed tag (which is the tag the webkit (chrome and safari) browsers use.)

        Simply setting the “wmode” parameter, in the embed tag, to transparent resolves this “non issues” issue… :)

        Thanks again guys…appreciate your work on these plugins.

        Chad

  • Hi, Thanks for the jquery Plugin. I love this, but am having issues with consistency across browsers.

    I am using the “blue” skin, got it working fine in IE8.

    In Firefox – the menu doesn’t all fit on one line.

    In Chrome and Safari, it ad’s an extra 20 px or so to the tag. You can see this when hovering over the menu choices. Try hovering over each of the main nav items, and you will see what I mean.

    Also in Chrome / Safari – (and partially in Firefox) the sub menu will not appear above the slideshow on the home page.

    the website is proadinsight . com
    you can email me as well.

    Regards,
    Chad

  • Yes, I figured that out. But I thought it would be easy for you guys to tell me how to change it to a fixed position. The full width part is easy, so it’s a fixed position under the main menu that I can’t figure out. But maybe it’s not that easy to modify?

    • Hi Jurgen – I will take a look at the plugin

  • great menu. There however seems to be some delay when the menu is clicked (it keeps expanding and then collaps) . Maybe we installed not quite correct?

    Many thanks, Luit

    • Hi Luit – I cant see any problem in Firefox. What browser are you using?

  • Great plugin, one of the best and easiest mega menus I have found, thanks! I would like to have the dropdown menu full width however, how can this be achieved? I tried to set it the same width as the parent menu, but then the submenu doesn’t always stay centered. Can you help me? Thanks!

    • Hi Jurgen – thanks. With the current format of the plugin its not possible to create a full width menu as the position of the dropdown mega menu is actually calculated dynamically based on the position of the parent menu item

  • fyi .. I have added a blog entry for this plugin here – http://2wp.org/jquery-mega-menu-widget/

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags