Creating drop down menus using Javascript and CSS
If you want to have a drop down menu that animates as it is revealed, one of the best ways to do it is to use Javascript/AJAX or Flash, but we’ll only talk about the Javascript.
I found a nice script on www.hesido.com. The one that they provide doesn’t exactly drop down, so I modified it so that it would. Their script offers color changers as well; but in the one I modified, I just provide the scroll down part.
First comes the CSS:
#dropmenu p
{
padding:2px;
margin:0px;
border-bottom:1px solid #CCC;
height:20px;
width:100px;
}
#dropmenu div
{
display:block;
overflow:hidden;
background:#FFF;
border:1px solid #000;
width:100px;
height:20px;
float:left;
}
.menu
{
background:#CCC;
}
Explanation:
The two most important properties in this are display:block and overflow:hidden.
Without display:block, the width will end up being as much as the text inside takes up.
Without overflow:hidden, the contents inside the menu will always be visible.
Next is the HTML:
<div id="dropmenu">
<div>
<p class="menu">Menu1</p>
<p>Item1</p>
<p>Item2</p>
</div>
<div>
<p class="menu">Menu2</p>
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
<p>Item4</p>
</div>
</div>
Explanation:
This is pretty much self explanatory.
And now the somewhat hard part, the Javascript.
There are basically 3 parts to this Javascript, initAnim(), doHeightChangeMem(), and easeInOut().
initAnim():
window.onload = function()
{
initAnim();
}
function initAnim()
{
//set the id of the element that you want to apply drop down to
idName = "dropmenu";
//set the tags inside the element that you want to apply drop down to
tagName = "div";
var drop = document.getElementById(idName).getElementsByTagName(tagName);
//put the initial height, in pixels, here
var initialHeight = 23;
//put the heights, in pixels, of the drop down menus in the order that
//they appear on the page
var heights = [70,120];
//number of steps
var steps = 10;
//number of microseconds in between each execution
var interval = 10;
for(var i=0; i < drop.length; i++)
{
drop[i].onmouseover = heightChange;
drop[i].onmouseout = heightRestore;
drop[i].id = i;
}
function heightChange()
{
height = heights[this.id];
//if no mem is set, set it first;
if (!this.currentHeight) this.currentHeight = initialHeight;
doHeightChangeMem(this,this.currentHeight,height,steps,interval,0.9);
}
function heightRestore()
{
//avoid error if mouseout an element occurs before the mouseover
//(e.g. the pointer already in the object when onload)
if (!this.currentHeight) return;
doHeightChangeMem(this,this.currentHeight,initialHeight,steps,interval,0.5);
}
}
Explanation:
What this part of the script does is find all the elements with the tag that you set for tagName on the page within the id name that you set for idName.
You need to set the initialHeight of the menu items.
If you have drop down menus of different heights, say one menu has 4 links in it and another has only 2, then you’ll need to know what the height of each menu is. Then just place it in the heights array in same order as they are in the page.
You can also change 2 more variables, steps and interval; but you don’t have to since they’re fine the way they are now.
So the variables that you need to make sure to set are idName, tagName, initialHeight, and the heights array.
The “window.onload = function()” just loads the script after the page is loaded. Its a nice alternative to doing “body onLoad=function()” since there’s no need to change any HTML.
doHeightChangeMem():
function doHeightChangeMem(elem,startHeight,endHeight,steps,intervals,powr)
{
if (elem.heightChangeMemInt) window.clearInterval(elem.heightChangeMemInt);
var actStep = 0;
elem.heightChangeMemInt = window.setInterval(
function()
{
elem.currentHeight = easeInOut(startHeight,endHeight,steps,actStep,powr);
elem.style.height = elem.currentHeight+"px";
actStep++;
if (actStep > steps)
{
window.clearInterval(elem.heightChangeMemInt);
if(endHeight == 0)
elem.style.display = "none";
}
}
,intervals)
}
Explanation:
If you want a detailed explanation on this function go here.
easeInOut():
function easeInOut(minValue,maxValue,totalSteps,actualStep,powr)
{
//Generic Animation Step Value Generator By www.hesido.com
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
return Math.ceil(stepp)
}
Explanation:
In short, this function is the step function that gives this animation life. It calculates how many pixels are left to move and it “eases” the animation into it.
RSS feed for comments on this post
