Just to make it clear here is the code for what the user clicks on a menu option a sub menu shows up with the following options.
<div id="rampsMenu">
<a href="javascript:;" onclick="expand_ramps()"><img src="cw3/assets/images/leftNav/Ramps.jpg" border="0" /></a><br />
<a href="javascript:;"><img src="cw3/assets/images/leftNav/ThresholdRamps.jpg" border="0" /></a><br />
<img src="cw3/assets/images/leftNav/SuitcaseRamps.jpg" border="0" /><br />
<img src="cw3/assets/images/leftNav/SingleFoldRamps.jpg" border="0" /><br />
<img src="cw3/assets/images/leftNav/MultiFoldRamps.jpg" border="0" /><br />
<img src="cw3/assets/images/leftNav/PanelRamps.jpg" border="0" /><br />
<img src="cw3/assets/images/leftNav/PathwayRamps.jpg" border="0" /><br />
<img src="cw3/assets/images/leftNav/CurbCutRamps.jpg" border="0" /><br />
<img src="cw3/assets/images/leftNav/ShowAllRamps.jpg" border="0" /><br />
</div>
The first link makes the sub menu show up, and the first link on that menu (Threshold Ramps) is currently liked to nothing (i.e. javascript: ; ).
Here is the JavaScript I am using to make this happen.
function expand_ramps(value) {
/* check to see if menu is already open */
if (this.RampsOpen == 'Yes') {
document.getElementById("rampsMenu").style.height = "20px";
this.RampsOpen = 'No';
/* if the menu is currently not open, send it to drawInfo to perform the draw down effect */
} else {
var res = document.getElementById("rampsMenu");
/* element, goal size, starting size */
drawInfo(res,160,10);
this.RampsOpen = 'Yes';
}
}
function reset_all() {
document.getElementById("rampsMenu").style.height = "20px";
}
function drawInfo(element, goal, start) {
var GoalPt = goal;
element.style.height = (start)+"px";
element.style.clip="rect(0px, 222px, "+start+"px"+", 0px)";
var newvalue = start + 10;
var repeat = function () {
drawInfo(element,GoalPt,newvalue)
};
if (newvalue >= GoalPt) {
return;
} else {
element.info = setTimeout(repeat,1);
}
}