The hoverIntent plugin is really small. You could put it in your own JS.
http://cherne.net/brian/resources/jquery.hoverIntent.js (4k)
http://cherne.net/brian/resources/jquery.hoverIntent.minified.js (1.5k)
Any solution would pretty much be doing the same thing.
Glen
On 10/16/07, c.s. <[EMAIL PROTECTED]> wrote:
>
>
> 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;}
>
>
