Minor jQuery Dropdown Menu Issue [Beginner]

[AlexFrais]

Hey guys,

I am developing a dropdown menu using jQuery (I’m still a beginner). Basically, this is what I am having trouble with:

When I hover my mouse over "li.guide", the menu slides down as it should. But, when I try to click on or just hover on the menus that dropped down, the menu slides back up. Basically, the script I pasted below says this (the incorrect approach):

"Hover over li.guide, drop the menu down. When someone hovers off li.guide, collapse it."

And what i want to happen is someone hovers over li.guide and they move their mouse down to be able to click the content in the dropdown menu. But, when they hover their mouse off of the menu, it slides back up.

I hope I was clear enough! Here’s the code:

Code:

$(document).ready(function() {
$(‘li.guide’).mouseover(function() {
$(‘ul#guides_sub’).slideDown(‘medium’);
}).mouseout(function() {
$(‘ul#guides_sub’).slideUp(‘medium’);
});
});

I am just not sure how to change this code to how I want, but I know what I want it to do. Any help is very appreciated. Thanks!

[Perkin5]

Hi Alex,

I have the exact same problem – so must thousands of others and it’s amazing with it being such a common problem that there aren’t a bunch of video tutorials out there telling us how to solve it. My problem is worse because I’m using sprites as well. And I don’t want to use a plugin – I want to understand how to do it myself.

What I tried was to add a function so when you mouseover the dropdown, it shows until mouseout. That way, as you mouse from the top level button to the drop down, it stays showing until you mouseout. The snag then is that if you mouseover the dropdown without going to the top level button first, it still shows, which is not what you want.

I’m wondering if this is actually more advanced than we realise and maybe we need an ‘if’ statement or something of the sort.

Somebody please help!

Mike

[blue642]

Here is a link to an example page here on css-tricks, that shows how to achieleve one of the most simply jquery dropdowns.

http://css-tricks.com/examples/SimplejQueryDropdowns/

The approach is actually intuitive, even though at first it may seem a little daunting.

Basically, the menus are created and positioned with CSS, then the drop menus are hidden, and shown on a hover event.

Here is just the jQuery for quick reference.

Code:

$(function(){

$(“ul.dropdown li”).hover(function(){

$(this).addClass(“hover”);
$(‘ul:first’,this).css(‘visibility’, ‘visible’);

}, function(){

$(this).removeClass(“hover”);
$(‘ul:first’,this).css(‘visibility’, ‘hidden’);

});

$(“ul.dropdown li ul li:has(ul)”).find(“a:first”).append(” » “);

});

I haven’t had a chance to test it, but I imagine that if you could pretty easily convert it to a show/hide for some animation.

[Author]

Posts