JQuery Menu Question

JavaScript
1

Hey Folks,

I’m constructing this nice little jquery menu here, and there’s a couple of things I need help with:

After the #m1 menu div is shown and hovered over, I would like to be able to hide it again by mouseleaving out of the #button1 div, as well as by mouseleaving out of the “m1” menu div. So far it only hides when I mouseleave the “m1” menu div. So how do I make the menu hide again when I mouseleave the #button1 div? I hope this makes sense!

Thanx!!

here’z the code:

<!DOCTYPE html>
<html>
<head>
<title>Menu Fade</title>

	&lt;style type="text/css"&gt;
  • { margin: 0; padding: 0; }

body { background: #000; }

ol, ul { list-style: none; }

#wrapper {
width: 100%;
height: 100%;
position: relative;
}

#button1{
position: absolute;
left: 114px;
top: 40px;
display: block;
width: auto;
height: auto;
padding: 10px 8px 8px 8px;
font-family: arial;
font-size: 16px;
font-weight: bold;
color: yellow;
z-index:1000;
background-color: red;
}

#m1 {
position: absolute;
top: 40px;
left: 206px;
visibility: visible;
margin: 0px;
padding: 6px 0px 0px 0px;
width: 120px;
height: 160px;
background-color: red;

}

#m1 a {
position: relative;
display: block;
margin: 0px;
padding: 4px 10px;
width: auto;
white-space: nowrap;
text-align: right;
text-decoration: none;
color: #FFF;
font: bold 16px arial;
border: 0px;
}

#m1 a:hover {
color: #00B5FF;
margin: 0px;
padding: 4px 10px;
border: 0px;
position: relative;
}
</style>

	&lt;script src="http://code.jquery.com/jquery-1.5.2.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"&gt;	

		$(document).ready
		(function() 
		{	
			
			$("#m1").hide();
			
			$("#button1").mouseenter
			
			(function() 
			{
			$("#m1").show();
			}
			);
				
			
			$("#m1").mouseleave
			
			(function()
			{
			$("#m1").hide();
			}
			);
			
			
		}
		);
	&lt;/script&gt;	
&lt;/head&gt;

&lt;body&gt;
	&lt;div id="wrapper"
		&lt;div id="button1"&gt;Show me&lt;br /&gt;the menu!&lt;/div&gt;
		&lt;div id="m1"&gt;
        	&lt;ul&gt;
    			&lt;li&gt;&lt;a href="#"&gt;List Item 1&lt;/a&gt;&lt;/li&gt;
    			&lt;li&gt;&lt;a href="#"&gt;List Item 2&lt;/a&gt;&lt;/li&gt;
   				&lt;li&gt;&lt;a href="#"&gt;List Item 3&lt;/a&gt;&lt;/li&gt;
    			&lt;li&gt;&lt;a href="#"&gt;List Item 4&lt;/a&gt;&lt;/li&gt;
    			&lt;li&gt;&lt;a href="#"&gt;List Item 5&lt;/a&gt;&lt;/li&gt;
    			&lt;li&gt;&lt;a href="#"&gt;List Item 6&lt;/a&gt;&lt;/li&gt;
    		&lt;/ul&gt;
   		&lt;/div&gt; &lt;!-- END "m1" --&gt;
	&lt;/div&gt; &lt;!-- END "wrapper" --&gt;  
&lt;/body&gt;

</html>

2

I had to change a few things to get this to work. The cyan coloured background represents the limits beyond which the switch hides the list when you don’t go over the button.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Menu Fade</title>
<script type=“text/javascript” src=“http://code.jquery.com/jquery-1.5.2.js”>
</script>
<script type=“text/javascript”>
<!–
var menuOpen=false;
$(document).ready (function()
{ $(“#listA”).hide();
$(“#button1”).mouseenter( function()
{ if(menuOpen==false)
{ $(“#listA”).show(); menuOpen=true; }
else
{ $(“#listA”).hide(); menuOpen=false; }
});
$(“#m1”).mouseleave( function(){ $(“#listA”).hide(); menuOpen=false; });
});
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:16px; color:#000; text-align:left; }
li { margin-bottom:1px; }
ul { list-style: none; margin:0; padding:0; }
#wrap { position:relative; top:0px; left:0px; width:300px; height:300px; margin-left:50px; }
#m1 { position:absolute; top:100px; left:120px; height:190px; width:106px; background-color:#0FF; }
#m1 a:link, #m1 a:visited { margin:0px; text-decoration: none; color: #FFF; }
#m1 a:hover { color: #FF0; }
#button1{ position:absolute; left:0px; top:5px; width:100px; height:50px; margin-left:3px; color: #000; background-color:#FFF; text-align:center; cursor:pointer; }
#listA { position:absolute; top:60px; left:0px; width:100px; margin-left:3px; background-color:#000; text-align:center; }
–>
</style>
</head>

<body>

<div id=“wrap”>
<div id=“m1”>
<div id=“button1”>
Show me<br />
the menu!</div>
<!-- end button1 –>
<div id=“listA”>
<ul>
<li><a href=“#”>List Item 1</a></li>
<li><a href=“#”>List Item 2</a></li>
<li><a href=“#”>List Item 3</a></li>
<li><a href=“#”>List Item 4</a></li>
<li><a href=“#”>List Item 5</a></li>
<li><a href=“#”>List Item 6</a></li>
</ul>
</div>
<!-- end listA –>
</div>
<!-- end “m1” –>
</div>
<!-- end wrap –>

</body>

</html>