sorry abt the dbl post, i see my profile and the post wasnt there so i thought maybe i didnt post it. or something.
anyway. the reason why i nest the hover() - which i changed to mouseover already - is because i want to attach the event to inner li a's after the slidedown. so i dont get the effect u see http://iceangel89.5gigs.net/test_2.html ok maybe i need to see how others develop such accordion menus. i think maybe my design is wrong. when u move ur mouse down. it opens the 3rd link ok. continue till it exits that menu. it slides up, in doing so, triggers the slide down of another menu. as it slides, ur mouse (at the same spot) may trigger an inner slidedown. sometimes, depending on the dist, as 2 menu are animating at the same time, 1/2 way thru, the mouse leaves the menu being animated ... so ... the menu slides up again ... i think u may get what i mean. maybe i must try a "horizontal opening" menu instead On Jul 26, 11:34 pm, Charlie <charlie...@gmail.com> wrote: > take a closer look at how hover function works. It requires *two* functions > called. You are also embedding a hover function within a hover function > (mouseover) then calling the mouseover function within > itselfhttp://docs.jquery.com/Events/hover > try this and see if this is the effect you want > $(function() { > $("#mainnav > li > a").mouseover(function() { > > $(this).next("ul").slideDown("fast").addClass("open"); > }); > > $("#mainnav").mouseleave(function() { > $(".open").slideUp("fast") > }); > });iceangel89wrote:i am trying to develop my own > accordion/sliding menu. (as a side qn, any good ones that can be easily > customized/skinned?) i found that seem to trigger when i am sliding down an > "inner" menu. since its "inner", my mouse definately has not left #mainnav my > test pagehttp://iceangel89.5gigs.net/test.htmlwithout that annoying test > alerthttp://iceangel89.5gigs.net/test_1.html$("#mainnav").mouseleave(function() > { alert("mouseleave #mainnav"); }); more complete source: $(function() { > $("#mainnav > li > a").hover(mouseOver); $("#mainnav").mouseleave(function() > { alert("mouseleave #mainnav"); }); }); function mouseOver() { > $(this).next("ul").slideDown("fast", function() { $("li:has(ul) > a", > this).hover(mouseOver); }); } #mainnav, #mainnav ul { list-style: none; > padding: 0; margin: 0; background: #bbb; } #mainnav ul { display: none; > margin: 5px 10px; } #mainnav a { display: block; padding: 5px 10px; margin: > 2px 0; background: yellow; } <ul id="mainnav"> <li><a href="#">Test</a></li> > <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li> <a > href="#">Test</a> <ul> <li><a href="#">Test</a></li> <li> <a href="#">Test > 1</a> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a > href="#">Test</a></li> </ul> </li> <li><a href="#">Test</a></li> </ul> </li> > <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul>
