Snippet Name: Accordian Menu
Description: Slick accordion menu code integrates easily into any project.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009
|
<html>
<head>
<style>
.parent_menu
{
width:200px;
height:30px;
font-size:16px;
color:#888;
background:#eee;
text-align:right;
border-bottom:1px dashed #888;
overflow:hidden;
cursor:pointer;
}
.parent_label
{
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
background:#eee;
}
.child_menu
{
font-size:12px;
padding:5px;
padding-right:15px;
}
.child_pad
{
padding-bottom:5px;
}
</style>
<script>
VAR step = 4;
VAR duration = 25;
VAR mem = NEW Array(
Array('parent_0', 30, 60, 30, 0),
Array('parent_1', 30, 135, 30, 0),
Array('parent_2', 30, 30, 30, 0),
Array('parent_3', 30, 115, 30, 0),
Array('parent_4', 30, 30, 30, 0),
Array('parent_5', 30, 30, 30, 0)
);
VAR parent_obj;
VAR _do
VAR key;
VAR label_obj;
FUNCTION expand_collapse_it(_key,_label_obj)
{
key = _key;
label_obj = _label_obj;
parent_obj = mem[key][0];
VAR max_height = parseInt(mem[key][2]);
VAR min_height = parseInt(mem[key][1]);
VAR start_height = parseInt(mem[key][3]);
VAR sw = parseInt(mem[key][4]);
IF(sw==0){start_height+=step;}
IF(sw==1){start_height-=step;}
IF(start_height>max_height)
{
clearTimeout(_do);
mem[key][4]=1;
start_height=max_height;
mem[key][3] = start_height;
}
ELSE IF(start_height<min_height)
{
clearTimeout(_do);
mem[key][4]=0;
start_height = min_height;
mem[key][3] = start_height;
document.getElementById(label_obj).style.background="#eee"; // Background color when menu item is closed.
}
ELSE
{
document.getElementById(label_obj).style.background="#cd0"; // Background color when menu item is open.
document.getElementById(parent_obj).style.height=start_height+"px";
mem[key][3] = start_height;
_do = setTimeout("expand_collapse_it(key,label_obj)",duration);
}
}
</script>
</head>
<body>
<div id="parent_0" CLASS="parent_menu">
<div id="L0" CLASS="parent_label" onclick="expand_collapse_it(0,'L0');">HOME PAGE</div>
</div>
<div id="parent_1" CLASS="parent_menu">
<div id="L1" CLASS="parent_label" onclick="expand_collapse_it(1,'L1');">SEAHARVEST</div>
<div CLASS="child_menu">
<div CLASS="child_pad">WHO ARE WE?</div>
<div CLASS="child_pad">MISSION & VISION</div>
<div CLASS="child_pad">HSE</div>
<div CLASS="child_pad">INTERNAL SYSTEM</div>
<div CLASS="child_pad">OWNERS</div>
</div>
</div>
<div id="parent_2" CLASS="parent_menu">
<div id="L2" CLASS="parent_label" onclick="expand_collapse_it(2,'L2');">NEWS / INQUIRES</div>
</div>
<div id="parent_3" CLASS="parent_menu">
<div id="L3" CLASS="parent_label" onclick="expand_collapse_it(3,'L3');">PRODUCTS</div>
<div CLASS="child_menu">
<div CLASS="child_pad">PIPELINE SOLUTIONS</div>
<div CLASS="child_pad">DRILLING SOLUTIONS</div>
<div CLASS="child_pad">COMPLETION & WORKOVER</div>
<div CLASS="child_pad">INTEGRATED DOWNHOLE</div>
</div>
</div>
<div id="parent_4" CLASS="parent_menu">
<div id="L4" CLASS="parent_label" onclick="expand_collapse_it(4,'L4');">CAREERS</div>
</div>
<div id="parent_5" CLASS="parent_menu">
<div id="L5" CLASS="parent_label" onclick="expand_collapse_it(5,'L5');">CONTACT US</div>
</div>
</body
</html> |
