Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #15586

    Hi there, just wondering if anyone can help with this query?

    I want the dropdown menus / mega menus to open when a nav link is clicked, rather than on hover. Can someone point to where in the JS I need to do this? I’ve scanned through /abundance/framework/js/avia_mega_menu.js but can’t see the event handler for this.

    Cheers,

    Dave

    #88097

    Hi Dave,

    I’m not sure either so let me tag the rest of the team to see if they know.

    Regards,

    Mya

    #88098

    Right. I’ve made some progress. The file to change is:

    /abundance/js/avia.js

    Dropdowns work great, I made a small change to the dropdown function starting at line 282:

    // bind events for dropdown menu
    dropdownItems.find('li').andSelf().each(function()
    {
    var currentItem = $(this),
    sublist = currentItem.find('ul:first'),
    showList = false;

    if(sublist.length)
    {
    sublist.css({display:'block', opacity:0, visibility:'hidden'});
    var currentLink = currentItem.find('>a');

    currentLink.bind('mouseup', function() //currentLink.bind('mouseenter', function() <--CHANGED BY DAVE
    {
    sublist.stop().css({visibility:'visible'}).animate({opacity:1});
    });

    currentItem.bind('mouseleave', function()
    {
    sublist.stop().animate({opacity:0}, function()
    {
    sublist.css({visibility:'hidden'});
    });
    });

    }

    });

    So you click a nav link to get the dropdown menu and it automatically closes when you move the mouse away from it.

    The mega menus I haven’t sorted completely yet. I’ve changed the function starting on line 262 to the following:

    //bind event for mega menu
    megaItems.each(function(i){

    $(this).toggle( //$(this).hover( <--CHANGED BY DAVE

    function()
    {
    delayCheck = true;
    setTimeout(function(){megaDivShow(i); },options.delay);
    },

    function()
    {
    delayCheck
    = false;
    setTimeout(function(){megaDivHide(i); },options.delay);
    }
    );
    });

    Trouble is, using toggle, you have to click the nav link again to get rid of the menu, rather than it disappearing automatically. My jQuery skills aren’t strong enough to quickly see how to rewrite this function to work the same as dropdowns. Any ideas?

    Cheers,

    Dave

    #88099

    Cool. I think I solved it. I did this:

    //bind event for mega menu
    megaItems.each(function(i){

    $(this).mouseup(

    function()
    {
    delayCheck = true;
    setTimeout(function(){megaDivShow(i); },options.delay);
    }
    );

    $(this).mouseleave(
    function()
    {
    delayCheck
    = false;
    setTimeout(function(){megaDivHide(i); },options.delay);
    }
    );
    });

    Seems to work.

    #88100

    Further tweak… I changed “options.delay” to “0” for the mouseup event on mega menus. It felt odd to have a slight delay after clicking the link before the mega menu faded into place. You can see the final product here:

    http://www.amanotech.dreamhosters.com

    (It’s heavily customised, but it is Abundance, honest!)

    #88101

    OK, I want the moon on a stick now ;-)

    For tablet / smartphone users, I need to be able to click outside the mega menus / dropdowns when they’re open to make them go away (‘cos there’s no mouseleave event). Any ideas?

    #88102

    Hi,

    Unfortunately t’s not as simple as changing hover to click, since hover is still needed as well in the click menu to determine when to close the child menu.

    Here is a link (http://stackoverflow.com/questions/7312414/superfish-jquery-menu-open-on-click-rather-than-hover) of the process of changing a (not this one) mega menu from hover to click. You can compare the code to see that the end result is fairly different and looks very labor intensive.

    Of course you can always pay a few dollars to buy a ready made menu which does what you want in 20 different ways. Here is two cool ones for $15 and $4 that have clicks, sliders and rattles, and there are many more: (http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703) (http://codecanyon.net/item/mega-menu-complete-set/152825)

    Thanks,

    Nick

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Mega menu on click, rather than hover’ is closed to new replies.