[jQuery] Need help building a jQuery dropdown menu
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!