Adding setTimeout UL menu using JavaScript
I am trying to add a delay to a drop down menu. I want the menu to stay visible for about two seconds after the cursor has moved away from it. Here is an example of my HTML.
<ul class="select">
<li><a><b>Home</b></a></li>
<li><a><b>Accommodation</b></a>
<ul class="sub">
<li><a>Hotels</a></li>
<li><a>Luxury Villas</a></li>
<li><a>Apartments</a></li>
<li><a>Hostels</a></li>
</ul>
</li>
</ul>
Here is the css i am using.
nav {
height:30px;
width: 904px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:13px;
z-index:500;
background-color: #666;
background: url(../images/sub-nav_04.jpg);
}
nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap; }
nav li {
float:left;
}
nav .select a {
display:block;
height:30px;
float:left;
text-decoration:none;
line-height:30px;
white-space:nowrap;
color:#333;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #666;
padding-right: 0;
padding-left: 15px;
margin-top: 0px;
margin-bottom: 0px;
}
nav .select1 a {
height: 30px;
line-height:30px;
cursor:pointer;
color:#fff;
background-color: #006;
background-image: url(../images/sub-nav2.jpg);
}
nav .select ab {
display:block; padding:0 30px 0px 15px; }
nav .select li:hover a {
height: 30px;
line-height:30px;
cursor:pointer;
color:#fff;
background-color: #006;
background-image: url(../images/sub-nav2.jpg);
z-index: 2000;
}
nav .select li:hover ab {
display:block;
cursor:pointer;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 15px;
z-index: 2000;
}
nav .sub {
display:none; margin:0; padding:0 0 0 0;list-style:none; background-color: #006; }
nav .sub li { background-color:#006;}
nav .select li:hover .sub {
height:30px; display:block; position:absolute; float:left; width:904px; top:28px; left:0; text-align:center; background-color: #006; background:url(../images/sub-nav2.jpg); z-index: 980; }
nav .select li:hover .sub li a {
display:block;
height:30px;
line-height:30px;
float:left;
white-space:nowrap;
color: #FFF;
font-size:12px;
font-weight: bold;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: dotted;
border-right-color: #666;
padding-right: 16px;
padding-left: 16px;
margin-right: 0;
margin-bottom: 0;
margin-left: 7;
z-index: 1000;
}
nav .select li:hover .sub li a:hover {
color: #000; background:#fff; border-top: 0px; line-height:30px; height: 30px; background:url(../images/sub-nav3.jpg); z-index: 990; }
A (sorta) good example of this can be found here
var hideDelayTimer = null;
$('.select').mouseenter(function () {
$(this).children('.sub').slideDown().mousenter(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
}).mouseleave(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
$(this).slideUp();
}, 2 * 1000);
});
});
If you need some help with positioning, you could do something like this:
$('.sub').each(function () {
var parent = $(this).parent();
var parentOffset = parent.offset();
$(this).css({
left: parentOffset.left + parent.width(),
top: parentOffset.top
});
});