Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: Accordian Menu Jump to:  
Category: >> JavaScript >> Accordian Menu Bookmark and Share

<< lastnext >>

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>


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 113 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?