Reputation: 7599
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
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