Hey, I'm working on creating a vertical sliding effect and I've managed to get it almost right with simple code. However, there are three issues that I need help with:
- I want the sub menus to be closed by default when the page loads
- When quickly hovering over the links, the sub menus start sliding erratically. I need the animation to be smoother and more controlled
- Currently, if you hover anywhere aligned with the links that slide down, they will trigger the animation. I want the sliding effect to occur only when directly mousing over the link itself.
Below is the code. Any help would be appreciated. Thanks!
<script type='text/javascript'>
$(document).ready(function(){
$("nav.main_menu li").hover(function(){
$(this).children("ul").slideDown(500);
},function(){
$(this).children("ul").slideUp(300);
});
});
</script>
<nav class="main_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="sub-menu">
<li><a href="#">Events</a></li>
<li><a href="#">Updates</a></li>
</ul>
</li>
<li><a href="#">People</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a>
<ul class="sub-menu">
<li><a href="#">2009</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2013</a></li>
<li><a href="#">2014</a></li>
<li><a href="#">2015</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Bio</a></li>
</ul>
</nav>