Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

mwilloam

macrumors newbie
Original poster
Apr 3, 2010
25
0
I am trying to create simple drop down menus so when you hover over an element it will dropdown a hidden list in an animated manner. I'm trying to keep this as simple as possible and JQuery slideToggle seems to be it but there is an issue. I can get the effect to work correctly but if I move my mouse fast on and off the hover the menu will bounce until the amount of hovers are completed. I've tried using ".stop" so as to stop the animation when the hover ends but for some reason when I hover back on again the hidden element only drops down to the point where I ending the last hover. Here is a link to an example:

http://custommediastudios.com/jdrop

And here is the code:

PHP:
<!DOCTYPE html>
<html>
<head>

<style>

#blue{
background-color: blue;
width:200px;
padding: 20px;
}

p{
display:block;
background-color:red;
color: white;
}

</style>

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script>
$(document).ready(function() {
	$("ul").hide();
	$(".drop").hover(function () {
	$("ul").stop().slideToggle("slow");
	});
	});
</script>

</head>

<body>
	<div id="blue">
		<p class="drop">Menu</p>
		<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
		<li>Four</li>
		</ul>
	</div>
</body>
</html>
 
Last edited by a moderator:
The reason is because you have a 1em margin on your ul. So technically, it "bounces" up when the mouse is at this location. If you need there to be spacing between the main menu and the first nav item, i'd suggest top padding on the ul or first li item.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.