Team:Columbia-Cooper-NYC

From 2012.igem.org

(Difference between revisions)
Line 15: Line 15:
|}
|}
-->
-->
-
 
<html>
<html>
-
 
<head>
<head>
-
<script>
+
<body>
-
var TimeOut        = 300;
+
<!-- dd menu -->
-
var currentLayer    = null;
+
<script type="text/javascript">
-
var currentitem    = null;
+
<!--
-
var currentLayerNum = 0;
+
var timeout        = 500;
-
var noClose        = 0;
+
var closetimer = 0;
-
var closeTimer     = null;
+
var ddmenuitem     = 0;
-
function mopen(n) {
+
// open hidden layer
-
  var l  = document.getElementById("menu"+n);
+
function mopen(id)
-
  var mm = document.getElementById("mmenu"+n);
+
{
-
+
// cancel close timer
-
  if(l) {
+
mcancelclosetime();
-
    mcancelclosetime();
+
-
    l.style.visibility='visible';
+
-
    if(currentLayer && (currentLayerNum != n))
+
-
      currentLayer.style.visibility='hidden';
+
-
    currentLayer = l;
+
-
    currentitem = mm;
+
-
    currentLayerNum = n;
+
-
  } else if(currentLayer) {
+
-
    currentLayer.style.visibility='hidden';
+
-
    currentLayerNum = 0;
+
-
    currentitem = null;
+
-
    currentLayer = null;
+
-
}
+
-
}
+
-
function mclosetime() {
+
// close old layer
-
  closeTimer = window.setTimeout(mclose, TimeOut);
+
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
-
}
+
-
function mcancelclosetime() {
+
// get new layer and show it
-
  if(closeTimer) {
+
ddmenuitem = document.getElementById(id);
-
    window.clearTimeout(closeTimer);
+
ddmenuitem.style.visibility = 'visible';
-
    closeTimer = null;
+
-
  }
+
-
}
+
-
function mclose() {
 
-
  if(currentLayer && noClose!=1)  {
 
-
    currentLayer.style.visibility='hidden';
 
-
    currentLayerNum = 0;
 
-
    currentLayer = null;
 
-
    currentitem = null;
 
-
  } else {
 
-
    noClose = 0;
 
-
  }
 
-
  currentLayer = null;
 
-
  currentitem = null;
 
}
}
-
 
+
// close showed layer
-
document.onclick = mclose;
+
function mclose()
-
</script>
+
{
-
</head>
+
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
-
 
+
-
<body>
+
-
<ul id="dd">
+
-
  <li><a href="#" class="menu" id="mmenu1"
+
-
      onmouseover="mopen(1);"
+
-
      onmouseout="mclosetime();">Home</a>
+
-
    <div class="submenu" id="menu1"
+
-
      onmouseover="mcancelclosetime()"
+
-
      onmouseout="mclosetime();">
+
-
        <a href="#">HTML Tutorials</a>
+
-
        <a href="#">DHTML Tutorials</a>
+
-
        <a href="#">JavaScript Tutorials</a>
+
-
        <a href="#">CSS Tutorials</a>
+
-
    </div>
+
-
  </li>
+
-
  <li><a href="#" class="menu" id="mmenu2"
+
-
      onmouseover="mopen(2);"
+
-
      onmouseout="mclosetime();">Download</a>
+
-
    <div class="submenu" id="menu2"
+
-
      onmouseover="mcancelclosetime()"
+
-
      onmouseout="mclosetime();">
+
-
        <a href="#">ASP Scripts</a>
+
-
        <a href="#">PHP Scripts</a>
+
-
        <a href="#">Ajax Scripts</a>
+
-
        <a href="#">Perl Scripts</a>
+
-
    </div>
+
-
  </li>
+
-
  <li><a href="#" class="menu">Order</a></li>
+
-
  <li><a href="#" class="menu">Help</a></li>
+
-
  <li><a href="#" class="menu" id="mmenu3"
+
-
      onmouseover="mopen(3);"
+
-
      onmouseout="mclosetime();">Contact</a>
+
-
    <div class="submenu" id="menu3"
+
-
      onmouseover="mcancelclosetime()"
+
-
      onmouseout="mclosetime();">
+
-
        <a href="#">Office</a>
+
-
        <a href="#">Sales</a>
+
-
        <a href="#">Customer Service</a>
+
-
        <a href="#">Shipping</a>
+
-
    </div>
+
-
  </li>
+
-
</ul>
+
-
</body>
+
-
 
+
-
<style type = "text/css">
+
-
#dd {
+
-
  margin-left: 25%;
+
-
  padding: 0 0 20px 0;
+
}
}
-
#dd li {
+
// go close timer
-
  margin: 0;
+
function mclosetime()
-
  padding: 0;
+
{
-
  list-style: none;
+
closetimer = window.setTimeout(mclose, timeout);
-
  float: left;
+
-
  font: bold 11px arial;
+
}
}
-
#dd li a.menu {
+
// cancel close timer
-
  display: block;
+
function mcancelclosetime()
-
  text-align: center;
+
{
-
  background: #5970B2;
+
if(closetimer)
-
  padding: 4px 10px;
+
{
-
  margin: 0 1px 0 0;
+
window.clearTimeout(closetimer);
-
  color: #FFF;
+
closetimer = null;
-
  width: 60px;
+
}
-
  text-decoration: none;
+
}
}
-
#dd li a.menu:hover {
+
// close layer when click-out
-
  background: #49A3FF;
+
document.onclick = mclose;
-
}
+
// -->
 +
</script>
 +
<style>
 +
#sddm
 +
{ margin: 0;
 +
padding: 0;
 +
z-index: 30}
-
.submenu {
+
#sddm li
-
  background: #EAEBD8;
+
{ margin: 0;
-
  border: 1px solid #5970B2;
+
padding: 0;
-
  visibility: hidden;
+
list-style: none;
-
  position: absolute;
+
float: left;
-
  z-index: 3;
+
font: bold 11px arial}
-
}
+
-
.submenu a {
+
#sddm li a
-
  display: block;
+
{ display: block;
-
  font: 11px arial;
+
margin: 0 1px 0 0;
-
  text-align: left;
+
padding: 4px 10px;
-
  text-decoration: none;
+
width: 60px;
-
  padding: 5px;
+
background: #5970B2;
-
  color: #2875DE;
+
color: #FFF;
-
}
+
text-align: center;
 +
text-decoration: none}
-
.submenu a:hover {
+
#sddm li a:hover
-
  background: #49A3FF;
+
{ background: #49A3FF}
-
  color: #FFF;
+
-
}
+
-
</style type = "text/css">
+
-
 
+
-
</html>
+
 +
#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>
 +
<!-- div class="sample" style="margin-bottom: 15px;height:42px;"><span -->
 +
<ul id="sddm" style="width:420px;margin:0 auto">
 +
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
 +
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 +
<a href="#">HTML/CSS</a>
 +
<a href="#">DHTML Menu</a>
 +
<a href="#">Home Sweet Home</a>
 +
<a href="#">Cascading</a>
 +
<a href="#">CSS Horizontal</a>
 +
</div>
 +
</li>
 +
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
 +
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 +
<a href="#">ASP Server-side</a>
 +
<a href="#">Pulldown navigation</a>
 +
<a href="#">AJAX Drop Submenu</a>
 +
<a href="#">DIV Cascading</a>
 +
</div>
 +
</li>
 +
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
 +
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 +
<a href="#">Visa Credit Card</a>
 +
<a href="#">Paypal</a>
 +
</div>
 +
</li>
 +
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
 +
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 +
<a href="#">Download Help File</a>
 +
<a href="#">Read online</a>
 +
</div>
 +
</li>
 +
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
 +
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 +
<a href="#">E-mail</a>
 +
<a href="#">Submit Request Form</a>
 +
<a href="#">Call Center</a>
 +
</div>
 +
</li>
 +
</ul>
 +
<div style="clear:both"></div>
 +
<!-- /span></div -->
 +
<!-- /dd -->
 +
</script>
 +
</body>
 +
</head>
<!--
<!--

Revision as of 22:04, 16 August 2012