CODEWITHSUNDEEP
jquery
Jon Schenk
Jon Schenk

Reputation: 65

jQuery Hover Menu

The following code displays a sub-menu when you hover over a menu item. Since its using a timer, if you don't select the sub-menu item fast enough, the sub-menu items disappear. I would rather have it highlite the menu option it is on and keep the sub-menu items until you hover over or click another main menu item:

$(document).ready(function(){ Nifty("#menu a","small top transparent"); Nifty("#outcontent","medium bottom transparent");

function hideSubMenu() {
    $("#sub-menu-content").fadeOut('slow');
    hideSubMenu.timeout = 0;
}

$('#menu a').hover(function() { //start function when any link is clicked
    if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout);
    hideSubMenu.timeout = 0;
    $("#sub-menu-content").hide();

    var html = '<ul>' + $(this).next('ul.sub-menu').html() + '</ul>&nbsp;';
    $("#sub-menu-content").html(html); //show the html inside .content div
    $("#sub-menu-content").fadeIn('fast'); //animation
},function(){
    hideSubMenu.timeout = setTimeout(hideSubMenu, 800);
}); //close click(

$('#sub-menu-content').hover(function() {
    if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout);
    hideSubMenu.timeout = 0;
},function(){
    hideSubMenu.timeout = setTimeout(hideSubMenu, 800);
}); //close click(
}); //close $(

To see it in action:

http://cruisecontrolledmarketing.com/test/welcome/login user: member password: rebmem

Thank you!

Upvotes: 2

Views: 18674

Answers (2)

Max Rios
Max Rios

Reputation: 2256

I found an amazing page that nearly contains any kind of different concept of menus, popups, hover, and so worth with any kind of effects you can imagine. I found it incredible useful to extend some of them and make even better menus.

45 beautiful jQuery Menu plugins and tutorials

Upvotes: 0

ajm
ajm

Reputation: 20105

Rather than hacking something up yourself, how about checking out the hoverIntent plugin?

Upvotes: 7

Related Questions