CoderZone.org

Category: >> JavaScript >> Accordian Menu Bookmark and Share

<< lastnext >>

Snippet Name: Accordian Menu

Description: Slick accordion menu code integrates easily into any project.

Comment: (none)

Author: CoderZone
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>
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 6