CODEWITHSUNDEEP
cssslide
user1165861
user1165861

Reputation: 867

Vertical Sliding Menu Bar

Ok so I'm trying to create a vertical sliding and I got one to almost work the way I want. It's a really simple code. There's 3 problems though:

Here's the code: 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>

Upvotes: 0

Views: 2457

Answers (1)

David Millar
David Millar

Reputation: 1878

  • To make the submenus closed, either set the CSS for them to display:none; or do $("li ul").hide(); inside of the .ready() function before you define the hover bit.
  • This is an unfortunate side-effect of this style of hover menus. There's a jQuery plugin called HoverIntent that I've used before to help this, but in the end I ended up not doing any animation as it's just too tricky to pull off in a nice way.
  • It sounds like the li elements span a much larger portion of the page than is visible. You may want to check out your CSS for them and limit the height or width of them. So long as overflow:hidden isn't set, the submenus should still appear.

Upvotes: 4

Related Questions