Hi folks I'm just starting out with jQuery. I want to make a simple 'ul' dropdown menu to improve my understanding. The basic flow is this:
'ul.menu li ul' has display:none >> on hover of li, get & store height of 'this' hidden ul >> set height of 'this' ul to 0 >> set display to block >> animate height to original stored height I know there are already some great plugins for dropdowns, but I really want to roll my own to get a better understanding of jQuery. So far I have managed the following, very badly done (see live version here - http://jsbin.com/eduvi): var $j = jQuery.noConflict(); $j(document).ready(function(){ // Get height of current hidden ul $j("ul.menu li").hover(function() { getHeight($j("ul", this).height()); }); // Set height to 0px $j('ul.menu li').hover(function() { $j("ul", this).css({"height":"0px"}); }); // Set display to block $j('ul.menu li').hover(function() { $j("ul", this).css({"display":"block"}); }); // Animate height to stored height $j('ul.menu li').hover(function getHeight(h) { $j('ul:first', this).stop().animate({ "height" : "100%" } , 400 ); }); // Display height of current hidden ul function getHeight(h) { $j("div.test").text("The height for the hidden ul is " + h + "px."); } }); I'd like to know how do I get it to use the stored original height, in place of that 100%. And secondly, I'm sure this can all be condensed down to just a few lines, but don't really have a clue how to do that yet. Any help very much appreciated!