Team:Columbia-Cooper-NYC
From 2012.igem.org
(Difference between revisions)
Line 15: | Line 15: | ||
|} | |} | ||
--> | --> | ||
- | |||
<html> | <html> | ||
- | |||
<head> | <head> | ||
- | < | + | <body> |
- | + | <!-- dd menu --> | |
- | + | <script type="text/javascript"> | |
- | + | <!-- | |
- | var | + | var timeout = 500; |
- | var | + | var closetimer = 0; |
- | var | + | var ddmenuitem = 0; |
- | function mopen( | + | // 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; | |
- | } | + | // --> |
+ | </script> | ||
+ | <style> | ||
+ | #sddm | ||
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 30} | ||
- | + | #sddm li | |
- | + | { margin: 0; | |
- | + | padding: 0; | |
- | + | list-style: none; | |
- | + | float: left; | |
- | + | 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> | ||
+ | <!-- 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