Team:Columbia-Cooper-NYC/trial2

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<script>
+
var timeout         = 500;
-
var timeout = 500;
+
var closetimer = 0;
-
var closetimer = 0;
+
var ddmenuitem     = 0;
-
var ddmenuitem = 0;
+
 +
// open hidden layer
function mopen(id)
function mopen(id)
{
{
Line 19: Line 19:
}
}
 +
// close showed layer
function mclose()
function mclose()
{
{
Line 24: Line 25:
}
}
 +
// go close timer
function mclosetime()
function mclosetime()
{
{
Line 29: Line 31:
}
}
 +
// cancel close timer
function mcancelclosetime()
function mcancelclosetime()
{
{
Line 38: Line 41:
}
}
 +
// close layer when click-out
document.onclick = mclose;  
document.onclick = mclose;  
 +
// -->
</script>
</script>
-
</head>
+
<style>
-
 
+
-
<body>
+
-
<ul id="sddm">
+
-
    <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="#">JavaScript</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="#">Order</a></li>
+
-
    <li><a href="#">Help</a></li>
+
-
    <li><a href="#">Contact</a></li>
+
-
</ul>
+
-
</div style="clear:both"></div>
+
-
</body>
+
-
 
+
-
 
+
-
 
+
-
<head>
+
-
<body>
+
-
<style type = "text/css">
+
#sddm
#sddm
{ margin: 0;
{ margin: 0;
Line 128: Line 95:
{ background: #49A3FF;
{ background: #49A3FF;
color: #FFF}
color: #FFF}
 +
</style>
-
</body>
 
-
</head>
 
-
 
+
<!-- div class="sample" style="margin-bottom: 15px;height:42px;"><span -->
-
 
+
<ul id="sddm" style="width:420px;margin:0 auto">
-
<head>
+
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
-
<style>
+
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
-
h2{
+
<a href="#">HTML/CSS</a>
-
font: 1.5em 'Myriad Pro', 'Gill Sans', 'Arial', sans-serif;
+
<a href="#">DHTML Menu</a>
-
font-weight: bold;
+
<a href="#">Home Sweet Home</a>
-
color: black;
+
<a href="#">Cascading</a>
-
}
+
<a href="#">CSS Horizontal</a>
-
 
+
</div>
-
p{
+
</li>
-
font: 1.2em Georgia, serif;
+
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
-
color: black;
+
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
-
}
+
<a href="#">ASP Server-side</a>
-
 
+
<a href="#">Pulldown navigation</a>
-
#fredbuilding{
+
<a href="#">AJAX Drop Submenu</a>
-
width: 500px;
+
<a href="#">DIV Cascading</a>
-
margin-left: auto;
+
</div>
-
margin-right: auto;
+
</li>
-
}
+
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
-
</style>
+
<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>
 +
</script>
</head>
</head>
-
</html>
 

Revision as of 21:54, 16 August 2012

var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // 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'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; // -->

Retrieved from "http://2012.igem.org/Team:Columbia-Cooper-NYC/trial2"