Response title
This is preview!
(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 & 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 & 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>
The sub menu hides when mouse leaves the main menu.
But if mouse is over sub menu,then also sub menu hides.
So I want to add functionality so that sub menu is hidden only if
1) mouse is moved down of main menu
2) if page is scrolled down
Please reply. Thanks.
1) mouse is moved down of main menu
2) if page is scrolled down
Please reply. Thanks.
© 2013 jQuery Foundation
Sponsored by and others.