PDA

View Full Version : Drop line menu problem



Aksaunders
12-27-2011, 05:01 AM
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


$(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");
}
});
});


<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>