Hi Claudina, I'm sorry I haven't much time today to help more directly, but
I'll trying setting you down the right path.
$("#topmenu li")
... will find all the LI tags inside of #topmenu and apply this behavior
$(#topmenu > li")
... will find only the LI tags that are direct children of #topmenu. I think
this is what you're intending to do.
You have only one UL.tags... I'm pretty sure you meant to have your first
nested UL to also have the "tag" class.
It's been a little while since I've worked with jQuery, so I may get this
next part a little more wrong ... but your makeTall, makeShort functions are
not inherently relative to the LI that calls them. So...
$("ul.tags")
... will match all UL tags with the className of "tags"
$("ul.tags",this)
... I think should find all the UL tags with a className of "tags" in the
scope of "this" (so inside the LI tag that called the function).
Hopefully someone else on the list can correct me if I've misled you.
This *shouldn't* impact using jQuery, but it may lead to browser issues
later on down the road... it's not valid to have DIV and FORM elements
inside a UL tag. You can get away with it for now, but eventually that's
something you should look into "fixing"
Also, it's great to learn jQuery by trying to do things on your own... but I
know there are plug-ins for dropdown menus. A popular one is Joel Birch's
"Superfish" menu...
http://users.tpg.com.au/j_birch/plugins/superfish/
Good luck,
Brian.
On 10/17/07, c.s. <[EMAIL PROTECTED]> wrote:
>
>
> I'm using the hoverIntent plugin to control a series of drop-down
> menus. I have it set up and it works save for the fact that if I hover
> over a li element it fires (displays) all the of drop-downs instead of
> doing it individually.
>
> I think I need to set up some sort of timer, or stop (?) This is my
> first js experience so I'm not quite sure how. Any help would be
> grealy apppreciated.
>
> The code looks like this:
>
> <html>
>
> <head>
>
> <script src="../../../../../_library/jquery_compressed.js"
> type="text/javascript" charset="utf-8"></script>
> <script src="../../../../../_library/jquery-pgin-hoverintent.js"
> type="text/javascript" charset="utf-8"></script>
> <script>
>
> $(document).ready(function(){
> $("#topmenu li ").hoverIntent({
> sensitivity: 1,
> interval: 1000,
> over: makeTall,
> timeout: 1000,
> out: makeShort
> });
> }); // close document.ready
>
> function makeTall(){ $("ul.tags").css({ display:"block"
> });}
> function makeShort(){ $("ul.tags").css({ display:"none"
> });}
>
>
>
> </script>
>
>
> </head>
>
> <body class="home">
>
> <ul id="topmenu">
> <li id="first"><a href="">this is the main link</a>
> <ul>
> <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 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>
> </ul>
>
> </body>
> </html>
>
> Thanks.
>
>
