• Home
  • ...">
    Geek asks and answers

    JQuery - clipping CSS layered menu

    I have a standard multi-level menu like this:

    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Dropdown</a>
       <ul class="sub-menu">
           <li><a href="#">Link #1</a></li> 
           <li><a href="#">Link #2</a></li>  
           <li><a href="#">Link #3</a></li>            
       </ul>
    </li>    
</ul>

    Source: http://jsfiddle.net/Dg2Cb/

    I want to animate the height of the submenu as on this page (looks like a jswing effect): http://themes.truethemes.net/Karma/

    Is there any simple (not dirty, as in the example above) way to achieve this?

    Here's the best effect I've managed to create (but it still looks bad, as it also displays width): http://jsfiddle.net/Dg2Cb/1/ p>

    I can use the jQuery easing plugin, but would like to do it without any plugins. I know how to animate the height of an element, but the difficult part is to change its visibility and animate it at the same time.

    +3
    3

    , :

    $("#nav > li").on("mouseenter mouseleave", function(e){
  e.type === "mouseenter" 
    ? $(".sub-menu", this).stop().animate({ height:'toggle', opacity:1 }, 250)
    : $(".sub-menu", this).stop().animate({ height:'toggle', opacity:0 }, 250) ;
});​

    , .sub-menu visibility:hidden - display:none.

    Fiddle: http://jsfiddle.net/Dg2Cb/6/

    +3

    .slideDown() , . http://api.jquery.com/slideDown/

    +3

    try the following:

    jQuery("#nav li").hover(function() {
    jQuery(this).children('ul').slideDown();
},function(){
     jQuery(this).children('ul').slideUp();
});

    http://jsfiddle.net/Dg2Cb/3/

    +3
    source

    More articles:


    All Articles