Team:Columbia-Cooper-NYC
From 2012.igem.org
(Difference between revisions)
Line 15: | Line 15: | ||
|} | |} | ||
--> | --> | ||
+ | |||
<html> | <html> | ||
+ | |||
<head> | <head> | ||
+ | <script> | ||
+ | var TimeOut = 300; | ||
+ | var currentLayer = null; | ||
+ | var currentitem = null; | ||
+ | var currentLayerNum = 0; | ||
+ | var noClose = 0; | ||
+ | var closeTimer = null; | ||
+ | function mopen(n) { | ||
+ | var l = document.getElementById("menu"+n); | ||
+ | var mm = document.getElementById("mmenu"+n); | ||
+ | |||
+ | if(l) { | ||
+ | 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() { | ||
+ | closeTimer = window.setTimeout(mclose, TimeOut); | ||
+ | } | ||
+ | |||
+ | function mcancelclosetime() { | ||
+ | if(closeTimer) { | ||
+ | window.clearTimeout(closeTimer); | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | document.onclick = mclose; | ||
+ | </script> | ||
+ | </head> | ||
+ | |||
+ | <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 { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | font: bold 11px arial; | ||
+ | } | ||
+ | |||
+ | #dd li a.menu { | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | background: #5970B2; | ||
+ | padding: 4px 10px; | ||
+ | margin: 0 1px 0 0; | ||
+ | color: #FFF; | ||
+ | width: 60px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #dd li a.menu:hover { | ||
+ | background: #49A3FF; | ||
+ | } | ||
+ | |||
+ | .submenu { | ||
+ | background: #EAEBD8; | ||
+ | border: 1px solid #5970B2; | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | .submenu a { | ||
+ | display: block; | ||
+ | font: 11px arial; | ||
+ | text-align: left; | ||
+ | text-decoration: none; | ||
+ | padding: 5px; | ||
+ | color: #2875DE; | ||
+ | } | ||
+ | |||
+ | .submenu a:hover { | ||
+ | background: #49A3FF; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | </style type = "text/css"> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- | ||
+ | <html> | ||
+ | <head> | ||
<script> | <script> | ||
Line 59: | Line 221: | ||
a.mO:active {color:#ffffff;} | a.mO:active {color:#ffffff;} | ||
.mD {color:#cc9966; font:10px arial, Helvetica, sans-serif; background-color:#ffffff; visibility:hidden; margin:0; padding:0; position:absolute; z-index:1000; top:60px; left:0; width:125px; border-style:solid; border-width:0 1px 1px; border-color:#663300;} | .mD {color:#cc9966; font:10px arial, Helvetica, sans-serif; background-color:#ffffff; visibility:hidden; margin:0; padding:0; position:absolute; z-index:1000; top:60px; left:0; width:125px; border-style:solid; border-width:0 1px 1px; border-color:#663300;} | ||
+ | </style> | ||
</html> | </html> | ||
- | + | --> | |
Revision as of 22:00, 16 August 2012