The drop line menu only closes when you either hover the parent or another of the parent's siblings. I would like the drop line menu to close automatically after 3 seconds if the user is not hovering over it. Hope you can help...here is all necessary code. Sample page can be found at http://www.warcatsfastpitch.org/testnav.htm
Code:$(document).ready(function () { $('#menuHolder ul li a').mouseover(function (event) { if (this == event.target) { $(this).parent().toggleClass('clicked'); if ($(this).parent().attr('class').indexOf('clicked') != -1) { $(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing"); } else { $(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing"); } $(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing"); } }) $('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) { if (this == event.target) { $(this).parent().toggleClass('clicked'); $(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing"); } }); });HTML Code:<div id="menuHolder"> <ul> <li><a href="#url">Home</a></li> <li><a href="#url">Our Philosophy</a></li> <li><a href="#url">P.R.I.D.E.</a></li> <li><a href="#x">Teams | ▼</a> <ul> <li><a href="#url">10U-Moore</a></li> <li><a href="#url">12U-Edison</a></li> <li><a href="#url">12U-Ross</a></li> <li><a href="#url">14U-Rios</a></li> <li><a href="#url">16U-Ross</a></li> </ul> </li> <li><a href="#x">Tournaments | ▼</a> <ul> <li><a href="#url">Warcats Invitational</a></li> <li><a href="#url">Pickerington Grand Finale</a></li> <li><a href="#url">Capital City Bat Wars</a></li> <li><a href="#url">Whitehall Fastpitch Classic</a></li> </ul> </li> <li><a href="#x">Multimedia | ▼</a> <ul> <li><a href="#url">Warcats Photo Gallery</a></li> <li><a href="#url">Warcats Video Gallery</a></li> </ul> </li> <li><a href="#x">Forms | ▼</a> <ul> <li><a target="_blank" href="print/registration.pdf">Player Registration</a></li> <li><a target="_blank" href="print/medical.pdf">Medical Authorization</a></li> <li><a target="_blank" href="print/photo.pdf">Photo Release</a></li> <li><a target="_blank" href="print/volunteer.pdf">Volunteer Profile</a></li> <li><a target="_blank" href="print/tournament.pdf">Warcats Invitational Registration</a></li> <li><a target="_blank" href="print/uniform.pdf">Uniform Order Form</a></li> <li><a target="_blank" href="print/address.pdf">Field Locations</a></li> </ul> </li> <li><a href="#url">Scores</a></li> <li><a href="#url">Calendar</a></li> <li><a href="#url">Spirit Wear</a></li> </ul> </div>



Reply With Quote
Bookmarks