asked on

Using JQuery to make a menu slide down

I am just now learning JQuery and am trying to get my css based menu to slidedown upon mouseover, but I just can't seem to get it to work. Can anyone tell me what I am doing wrong or missing? Thanks

<script type="text/javascript">
	$(document).ready(function() {
		$("li").mouseout(this).hide();
		$("ul").mouseover(function() {
			$("li:visible").slidedown("slow");
			return false;
		});
	});
</script>

Open in new window

pingeyeg

ASKER

Here is my latest attemp, but still no go:

<script type="text/javascript">
	$(document).ready(function() {
		$("#menu ul").hide();
		$("#menu li").mouseover(function() {
			$("#menu li").slideDown("slow");
		}).mouseout(function() {
			$("#menu li").slideUp("fast");
		)};
	});
</script>

Open in new window

paese

I don't know jQuery but i know the syntax a bit. Hav you read http://jeroencoumans.nl/journal/simple-accessible-jquery-menu ? I think you're missing some css or a slight part which makes all not working.

What browser are you using? Maybe the error console says something?

sh0e

Full source or a demo site would help. Is it not doing anything, or not behaving as expected?

pingeyeg

ASKER

Right now, the menu stays open until you move your mouse over the menu. When you move the mouse over the menu, the menu disappears, but it doesn't slide up. The website for this is http://www.goodboy-test.com. I'm working on the top menu bar.

ASKER CERTIFIED SOLUTION

sh0e

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pingeyeg

ASKER

sh0e: Thanks for the solution. Would you find explaining that to me? I'm still learning JQuery and any explanation is a great help.

sh0e

I traverse down the DOM and hide all the drop down lists.
I show the menu div.
I find the main links on the menu and add mouseover event to:
Find the corresponding drop down list, and slide it down.
Add a mouseout event to:
Find the corresponding drop down list, and slide it up.

pingeyeg

ASKER

What event should I use if I want the down to stay there while navigating the links?

pingeyeg

ASKER

This is my attempt at it, but the menu still slides back up when I hover over the links:

$(document).ready(function() {
		$('#menu > ul > li > ul').hide();
		$('#menu > ul > li > a').mouseover(function(){
    		$(this).next('ul').slideDown('900');
    		$('#menu > ul > li > ul > li').hover(function() {
    			$(this).next('ul').show();
    		});
		}).mouseout(function(){
    		$(this).next('ul').slideUp('fast');
		});
	});

Open in new window