CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
RBlair
RBlair

Reputation: 67

Sub-menu Disappears And Won't Allow Me To Click On Links

I have created a navigation bar with a sub-menu that stretches the entire width of the page, I am able to hover over the list items to make the menu appear. But when I move the mouse down into the sub-menu, it disappears. As soon as I move the mouse pointer off of the list item and move it down into the sub-menu, the sub-menu slides back up.

What I am wanting is for the sub-menu to be visible while the user is hovering over the list items as well as the menu, so that the items in the sub-menu could be clickable links. So if the mouse pointer is moved down onto the sub-menu, it would remain visible, so the links could be clicked.

Here is the current jQuery I have applied that makes sub-menus appear for both "men", "women" and "youth":

$('#men').hover(function(){
    $('#men_submenu').stop(true, false).slideDown('400');
}, function(){
    $('#men_submenu').stop(true, false).slideUp('400');
});
$('#women').hover(function(){
    $('#women_submenu').stop(true, false).slideDown('400');
}, function(){
    $('#women_submenu').stop(true, false).slideUp('400');
});
$('#youth').hover(function(){
    $('#youth_submenu').stop(true, false).slideDown('400');
}, function(){
    $('#youth_submenu').stop(true, false).slideUp('400');
});

Here is the JSFIDDLE: http://jsfiddle.net/RBlair/rLdtse86/10/

Thanks

Upvotes: 1

Views: 311

Answers (1)

skv
skv

Reputation: 1803

You have called the "exit" function immediately on hover lost of the parent element.

The .hover function in jquery does two things the first part when you hover over the element and the second part when you "un-hover" so to say. So 

$('#men').hover(function(){
        $('#men_submenu').stop(true, false).slideDown('400');
            $('#women_submenu').stop(true, false).slideUp('400');
        $('#youth_submenu').stop(true, false).slideUp('400');
    });

This part above calls only the first part, i.e. it only adds functionality to the hover on part, for turning off the sub-menu we use the 

$('#men_submenu').hover(function(){},function(){
        $('#men_submenu').stop(true, false).slideUp('400');
        $('#women_submenu').stop(true, false).slideUp('400');
        $('#youth_submenu').stop(true, false).slideUp('400');});

If you notice above the first function() is left blank so that while hovering on it no action is performed, but when the mouse is moved out of it, all the submenus are "hidden".

I have modified your code to demonstrate that (wouldn't call this a clean/the best solution, but to make the point)

http://jsfiddle.net/rLdtse86/14/

$('#men').hover(function(){
    $('#men_submenu').stop(true, false).slideDown('400');
        $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');
});
$('#women').hover(function(){
    $('#women_submenu').stop(true, false).slideDown('400');
        $('#men_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');
});
$('#youth').hover(function(){
    $('#youth_submenu').stop(true, false).slideDown('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#men_submenu').stop(true, false).slideUp('400');});
$('#men_submenu').hover(function(){},function(){
    $('#men_submenu').stop(true, false).slideUp('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');});
$('#women_submenu').hover(function(){},function(){
    $('#men_submenu').stop(true, false).slideUp('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');});
$('#youth_submenu').hover(function(){},function(){
    $('#men_submenu').stop(true, false).slideUp('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');});

Upvotes: 1

Related Questions