Forums

kelvinseasons

SO i finally got my menu working. Works good in all browser except Firefox 3 (suprised?)
problem is: On page load, my 1st mouse hover will not have the fadein effects(only the default instant appear) , it is only on my 2nd attempt onwards that the fadein works.


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/default.css\" media=\"screen\" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

<style type=\"text/css\">

*{
padding:0;
margin:0;
}

ul.menu, ul.menu li ul{
list-style:none;
}

ul.menu li{
float:left;
width:100px;
height:25px;
display:block;
text-align:center;
}

ul.subnav{
position:absolute;
left:0px;
top:25px;
display:none;
width:900px;
background:red;
}

.subnav li{
display:block;
width:100px;
height:25px;
text-align:center;
}

ul.menu li:hover ul{
display:block;
}


div{
position:absolute;
}

</style>

<script type=\"text/javascript\">

$(document).ready(function() {
	$('ul.menu li').hover(function() { //Hover over event on list item
		$(this).find('ul').fadeIn('fast'); //Show the subnav
	} , function() { //on hover out...
		$(this).find('ul').hide(); //Hide the subnav
	});
}); 

</script>



<title>JQuery</title>



</head>
<body>
<div>
<ul class=\"menu\">
	<li><a href=\"#\">Home</a></li>
	<li><a href=\"#\">Tutorials</a>
		<ul class=\"subnav\">
			<li><a href=\"#\">Sub Link</a></li>
			<li><a href=\"#\">Sub Link</a></li>
		</ul>
	</li>
	<li><a href=\"#\">Resources</a>
		<ul class=\"subnav\">
			<li><a href=\"#\">Sub Link 2</a></li>
			<li><a href=\"#\">Sub Link 2</a></li>
		</ul>
	</li>
	<li><a href=\"#\">About Us</a></li>
	<li><a href=\"#\">Contact Us</a></li>
</ul>

</div>
</body>
</html>

cybershot

try adding in some code that starts the animation in the stopped part. So something like this


$(document).ready(function() {
   $('ul.menu li').hover(function() { //Hover over event on list item
       $(this).find('ul').hide();//start the animation here
      $(this).find('ul').fadeIn('fast'); //Show the subnav
   } , function() { //on hover out...
      $(this).find('ul').hide(); //Hide the subnav
   });
});

You might need to edit your css. maybe set the css to hide the nav and then the jquery to show it instead of hide it in my code above. I think the point is that you need to tell the jquery where to start. It might think the nav is hidden to start with and that's why it's not doing what you want

kelvinseasons

Hello your solution works

although i still have display:none is my css, i added a

$(document).ready(function() {
$('ul.menu li').hover(function() { //Hover over event on list item
$(this).find('ul').hide();
$(this).find('ul').fadeIn('fast'); //Show the subnav
} , function() { //on hover out...
$(this).find('ul').hide(); //Hide the subnav
});
});

Is there anyway to make it not hide so fast when my hover is out?
I know there is this hoverintent plugin but i'm trying not to use any plugin if i can add a simple line to make it happen.

cybershot

It would help if you posted a link to your site and explain in more detail what you want

treehouse : what would you like to learn today?

Forums

Fadein effects works only on 2nd hover.