Search jQuery

jQuery Forum

keeping sub menu open on hover and close sub menu on mouse move down or scrolling

in Getting Started • 5 years ago

here is the code for menu.

(document).ready(function(){

$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.main-link").removeClass("active"); 
 $(this).addClass("active"); 
 $("#sub-link-bar").animate({
 height: "40px" 
 });
 $(".sub-links").hide();
 $(this).siblings(".sub-links").fadeIn();

});


 $("#main-nav").mouseleave(function(){ 

 $("#main-nav li a.main-link").removeClass("active"); 
 $(".sub-links").fadeOut();
 $("#sub-link-bar").animate({
 height: "10px" 
 }); 
 });
});

HTML code


<div id="sub-link-bar"> </div>

 <div id="wrap">

 <div class="roundfg">
 <ul id="main-nav">
 <li><a class="main-link" href="#">Home</a>
 <ul class="sub-links">
 <li><a class="main-link" href="#">Home</a></li>
 </ul>
 </li>
 <li><a class="main-link" href="#">Tutorials</a>
 <ul class="sub-links">
 <li><a href="#" >Design</a> </li>
 <li><a href="#">HTML &amp; CSS</a> </li>
 <li><a href="#" >Other</a> </li>
 <li><a href="#">PHP</a> </li>
 <li><a href="#">Ruby</a> </li>
 <li><a href="#">Site Builds</a> </li>
 <li><a href="#">Tools &amp; Tips</a> </li>
 <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
 </ul>
 </li>


 <li><a class="main-link" href="#">Videos</a>
 <ul class="sub-links">
 <li><a href="#">Screencasts</a> </li>
 </ul>
 </li>
 <li><a class="main-link" href="#">About</a>
 <ul class="sub-links">

 </ul>
 </li> 
 </ul>
</div>