CODEWITHSUNDEEP
jquerynavigationhtml-lists
Fuxi
Fuxi

Reputation: 7599

Animate UL (navigation) in jQuery

I've made a navigation using an UL and CSS. The children ul's are hidden by default - when moving the mouse over the parent LI (i.e. the menu item), I'd like to display the children UL by sliding it down.

What's the best method to achieve this?

I'm currently having this code and was wondering if there's a better way to do it:

$("div.menu ul.children").each(function(i){
    var ul = $(this);
    var he = ul.height();
    ul.height(0);
    var li = ul.parent();
        li.bind("mouseenter", function(){
            ul.animate({height: he+'px'}, {queue:false, duration: 100});
        });
        li.bind("mouseleave", function(){
            ul.animate({height: '0px'}, {queue:false, duration: 100});
        });
    });

Upvotes: 1

Views: 2688

Answers (1)

Vincent Mimoun-Prat
Vincent Mimoun-Prat

Reputation: 28583

Something along these lines:

$(".togglevisibility")
  .mouseenter(function() {
    $(this).children("ul").slideDown();
  })
  .mouseleave(function() {
    $(this).children("ul").slideUp();
  });

See http://jsfiddle.net/xfkeM/

Upvotes: 1

Related Questions