Hi there msz900,
Welcome to the forums.
One way to solve your problem would be to use setTimeOut()
With this method, when the mouse enters the menu area, you could call a function to expand it.
Then, as soon as the mouse leaves the area, you could cancel the function if it hasn't been executed yet.
This means that when you move your mouse over the menu area again and again, the menu doesn't remember all of this, and will expand only once.
Here's an example:
HTML Code:
<!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" />
<title>Expanding menu example</title>
<style type="text/css">
ul{ color:red; }
a{ text-decoration:none; }
.bk{
background-color:silver;
color: white;
display:box;
width:140;
margin-left:0;
list-style-type:none;
padding-top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="menu">
<li>
<a href="#"> Author</a>
<ul>
<li><a href="#">new</a></li>
<li><a href="#">old</a></li>
<li><a href="#">best</a></li>
<li><a href="#">good</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('ul').addClass('bk');
$('li>ul').hide();
var mnuTimeout = null;
$('#menu').mouseover(function(){
clearTimeout(mnuTimeout);
mnuTimeout = setTimeout(function(){$('li>ul').slideDown(200);},50);
});
$('#menu').mouseout(function(){
clearTimeout(mnuTimeout);
mnuTimeout = setTimeout(function(){$('li>ul').slideUp(200);},50);
});
});
</script>
</body>
</html>
JAVA SCRIPT AND JQUERY HELP
the error is that when i mouseover the main link it slidedown as i wish and when i mouseout it slide up that i want but here is the point when i mouseout from link it slideup again and again so how can i control it..?
Reply With Quote
Bookmarks