Team:Costa Rica-TEC-UNA

From 2012.igem.org

(Difference between revisions)
Line 3: Line 3:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
<script language="javascript" type="text/javascript">
-
<!--
+
// Copyright 2006-2007 javascript-array.com
-
var DDSPEED = 10;
+
-
var DDTIMER = 15;
+
-
// main function to handle the mouse events //
+
var timeout = 500;
-
function ddMenu(id,d){
+
var closetimer = 0;
-
  var h = document.getElementById(id + '-ddheader');
+
var ddmenuitem = 0;
-
  var c = document.getElementById(id + '-ddcontent');
+
-
  clearInterval(c.timer);
+
-
  if(d == 1){
+
-
    clearTimeout(h.timer);
+
-
    if(c.maxh && c.maxh <= c.offsetHeight){return}
+
-
    else if(!c.maxh){
+
-
      c.style.display = 'block';
+
-
      c.style.height = 'auto';
+
-
      c.maxh = c.offsetHeight;
+
-
      c.style.height = '0px';
+
-
    }
+
-
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
-
  }else{
+
-
    h.timer = setTimeout(function(){ddCollapse(c)},50);
+
-
  }
+
-
}
+
-
// collapse the menu //
+
// open hidden layer
-
function ddCollapse(c){
+
function mopen(id)
-
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
+
{
 +
// cancel close timer
 +
mcancelclosetime();
 +
 
 +
// close old layer
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 +
 
 +
// get new layer and show it
 +
ddmenuitem = document.getElementById(id);
 +
ddmenuitem.style.visibility = 'visible';
 +
 
 +
}
 +
// close showed layer
 +
function mclose()
 +
{
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
}
-
// cancel the collapse if a user rolls over the dropdown //
+
// go close timer
-
function cancelHide(id){
+
function mclosetime()
-
  var h = document.getElementById(id + '-ddheader');
+
{
-
  var c = document.getElementById(id + '-ddcontent');
+
closetimer = window.setTimeout(mclose, timeout);
-
  clearTimeout(h.timer);
+
-
  clearInterval(c.timer);
+
-
  if(c.offsetHeight < c.maxh){
+
-
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
-
  }
+
}
}
-
// incrementally expand/contract the dropdown and change the opacity //
+
// cancel close timer
-
function ddSlide(c,d){
+
function mcancelclosetime()
-
  var currh = c.offsetHeight;
+
{
-
  var dist;
+
if(closetimer)
-
  if(d == 1){
+
{
-
    dist = (Math.round((c.maxh - currh) / DDSPEED));
+
window.clearTimeout(closetimer);
-
  }else{
+
closetimer = null;
-
    dist = (Math.round(currh / DDSPEED));
+
}
-
  }
+
-
  if(dist <= 1 && d == 1){
+
-
    dist = 1;
+
-
  }
+
-
  c.style.height = currh + (dist * d) + 'px';
+
-
  c.style.opacity = currh / c.maxh;
+
-
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
+
-
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
+
-
    clearInterval(c.timer);
+
-
  }
+
}
}
-
//-->
+
 
 +
// close layer when click-out
 +
document.onclick = mclose;
</script>
</script>
<style type="text/css">
<style type="text/css">
-
body {margin:25px; font:12px Verdana, Arial, Helvetica}
+
#sddm
-
* {padding:0; margin:0}
+
{ margin: 0;
-
.dropdown {float:left; padding-right:5px}
+
padding: 0;
-
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(https://static.igem.org/mediawiki/2012/7/7b/DropdownMenu_Header.gif)}
+
z-index: 30}
-
.dropdown dt:hover {background:url(https://static.igem.org/mediawiki/2012/b/b2/Header_over.gif)}
+
 
-
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
+
#sddm li
-
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
+
{ margin: 0;
-
.dropdown li {display:inline}
+
padding: 0;
-
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
+
list-style: none;
-
.dropdown a:hover {background:#d9e1e4; color:#000}
+
float: left;
-
.dropdown .underline {border-bottom:1px solid #b9d6dc}
+
font: bold 11px arial}
 +
 
 +
#sddm li a
 +
{ display: block;
 +
margin: 0 1px 0 0;
 +
padding: 4px 10px;
 +
width: 60px;
 +
background: #5970B2;
 +
color: #FFF;
 +
text-align: center;
 +
text-decoration: none}
 +
 
 +
#sddm li a:hover
 +
{ background: #49A3FF}
 +
 
 +
#sddm div
 +
{ position: absolute;
 +
visibility: hidden;
 +
margin: 0;
 +
padding: 0;
 +
background: #EAEBD8;
 +
border: 1px solid #5970B2}
 +
 
 +
#sddm div a
 +
{ position: relative;
 +
display: block;
 +
margin: 0;
 +
padding: 5px 10px;
 +
width: auto;
 +
white-space: nowrap;
 +
text-align: left;
 +
text-decoration: none;
 +
background: #EAEBD8;
 +
color: #2875DE;
 +
font: 11px arial}
 +
 
 +
#sddm div a:hover
 +
{ background: #49A3FF;
 +
color: #FFF}
</style>
</style>
Line 88: Line 110:
</head>
</head>
<body>
<body>
-
<br /><br />
+
<ul id="sddm">
-
 
+
    <li><a href="#"  
-
<dl class="dropdown">
+
        onmouseover="mopen('m1')"  
-
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
+
        onmouseout="mclosetime()">Home</a>
-
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
+
        <div id="m1"  
-
    <ul>
+
            onmouseover="mcancelclosetime()"  
-
      <li><a href="#" class="underline">Navigation Item 1</a></li>
+
            onmouseout="mclosetime()">
-
      <li><a href="#" class="underline">Navigation Item 2</a></li>
+
        <a href="#">HTML/CSS</a>
-
      <li><a href="#" class="underline">Navigation Item 3</a></li>
+
        <a href="#">DHTML Menu</a>
-
      <li><a href="#" class="underline">Navigation Item 4</a></li>
+
        <a href="#">JavaScript</a>
-
      <li><a href="#">Navigation Item 5</a></li>
+
        </div>
-
    </ul>
+
    </li>
-
  </dd>
+
    <li><a href="#"  
-
</dl>
+
        onmouseover="mopen('m2')"  
-
 
+
        onmouseout="mclosetime()">Download</a>
-
<dl class="dropdown">
+
        <div id="m2"  
-
  <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
+
            onmouseover="mcancelclosetime()"  
-
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
+
            onmouseout="mclosetime()">
-
    <ul>
+
        <a href="#">ASP Server-side</a>
-
      <li><a href="#" class="underline">Navigation Item 5</a></li>
+
        <a href="#">Pulldown navigation</a>
-
      <li><a href="#" class="underline">Navigation Item 6</a></li>
+
        <a href="#">AJAX Drop Submenu</a>
-
      <li><a href="#" class="underline">Navigation Item 7</a></li>
+
        <a href="#">DIV Cascading </a>
-
      <li><a href="#" class="underline">Navigation Item 8</a></li>
+
        </div>
-
      <li><a href="#">Navigation Item 5</a></li>
+
    </li>
-
     </ul>
+
    <li><a href="#">Order</a></li>
-
  </dd>
+
     <li><a href="#">Help</a></li>
-
</dl>
+
     <li><a href="#">Contact</a></li>
-
 
+
</ul>
-
<dl class="dropdown">
+
<div style="clear:both"></div>
-
  <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Dropdown Three</dt>
+
-
  <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
+
-
     <ul>
+
-
      <li><a href="#" class="underline">Navigation Item 9</a></li>
+
-
    </ul>
+
-
  </dd>
+
-
</dl>
+
-
 
+
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+
-
<div style="clear:both" />
 
</body>
</body>
</html>
</html>

Revision as of 03:03, 13 August 2012

JavaScript Dropdown Menu Demo

Retrieved from "http://2012.igem.org/Team:Costa_Rica-TEC-UNA"