[jQuery] Hover delay possible without additional plugin?
I've created a menu system simialr to the Brown.edu homepage except
I've done it without js due to target audience restrictions. I'd like
to have a hover delay so that when the user mouses over the link the
menu will display after a couple seconds. I'm interested in using
jquery and I spent the day looking around for a way to do it without
having to use any additional plugins. I know that superfish menu is an
option, but that would be too heavily js powered for this menus
purposes.
Additionally, the hover needs to be specified on the <a> tag, so that
the menu still works in IE regardless of js being on or off (if off,
the only thing missing would be the delay feature).
Is there a way to control delay using what is available in the jquery
library only? Thanks, c.s.
This is a sample of the wireframe code:
HTML:
<ul id="topmenu">
<li><a href="">this is the main link</a>
<ul class="tags">
<form>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
</form>
</ul>
</li>
<li><a href="">this is the main link</a>
<ul>
<form>
<li><input type="checkbox">hello</li>
</form>
</ul>
</li>
<li><a href="">this is the main link</a>
<ul>
<form>
<li><input type="checkbox">hello</li>
</form>
</ul>
</li>
</ul>
CSS:
ul {
padding: 0; margin: 0;
font: 1em sans-serif;}
ul li {
list-style-type: none;
border-top: 1px solid #604f4b;
position: relative;
margin: 0; padding: 0;
}
ul ul {
display: none;
background: #fff;
}
ul ul, ul ul form, ul ul form div {
float: left;
}
ul ul:after,
ul li:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul ul li {border: none;}
ul li:hover > ul {display: block;}
li a {
display: block;
padding: 5px 7px;
text-decoration: none;
background: #ccc;
}
ul#topmenu, ul ul {width: 500px;}