creating a drop down menu similar to another websites

[itsmaddylol]

no, i'm not interested in copying it. i'm looking for ways to achieve a similar effect. the menu in question is the one used on collegefashionista.com
(http://www.collegefashionista.com)

i need a similar menu that you click/hover over one item (ex/ what school are you from?) that expands to a large list. i need this list to not just lay over the page, but in fact push the content down. this probably requires some javascript/jquery, but i figured i would start here for ideas.

[trollger]

You are right about the JavaScript, you are going to need that. In order to push the other content away you need to position it relatively. If I where you I would start by making the basic CSS lay out first. Make it so that when you change the height in CSS the page automaticly moves down to make room. Remember "position:relative;" is going to be your ticket!

Now that that works all you need to do is use Jquery's animation function. Once you include jquery it should be this simple


$("#TheButton").click(function(){
$("#TheSlider").animate({
'height' : '800px'
},500,"swing")
})


To make it slide back up just make another animate function to restore it to its origonal height. You may wish to use a Boolean type (JavaScript doesn't really have variable types, everything is more or less just an object) variable to store the state of the slider(up is false and down is true).

Good luck getting it to work