Team:Calgary/Sandbox
From 2010.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | <html> | |
- | + | <head> | |
- | + | <script type="text/javascript"> | |
- | + | // Copyright 2006-2007 javascript-array.com | |
+ | |||
+ | 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; | ||
+ | |||
+ | |||
+ | |||
+ | </script> | ||
+ | <body> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | |||
+ | #nav { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 30; | ||
+ | } | ||
+ | |||
+ | #nav li { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | font: bold 11px arial; | ||
+ | } | ||
+ | |||
+ | #nav li a { | ||
+ | display: block; | ||
+ | margin: 0 1px 0 0; | ||
+ | padding: 4px 10px; | ||
+ | width: 60px; | ||
+ | background: #FF0000; | ||
+ | color: #FFF; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #nav li a:hover { | ||
+ | background: #00FF00; | ||
+ | } | ||
+ | |||
+ | #nav div { | ||
+ | position: absolute; | ||
+ | visibility: hidden; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: #00FFFF; | ||
+ | border: 1px solid #000000; | ||
+ | } | ||
+ | #nav div a { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 5px 10px; | ||
+ | width: auto; | ||
+ | white-space: nowrap; | ||
+ | text-align: left; | ||
+ | text-decoration: none; | ||
+ | background: #FFFF00; | ||
+ | color: #000000; | ||
+ | font: 11px arial; | ||
+ | } | ||
+ | |||
+ | #nav div a:hover { | ||
+ | background: #FF00FF; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <ul id="nav"> | ||
+ | <li> | ||
+ | <a href="#" | ||
+ | onmouseover="mopen('m1')" | ||
+ | onmouseout="mclosetime()"> | ||
+ | Home</a> | ||
+ | <div id="m1" | ||
+ | onmouseover="mcancelclose()" | ||
+ | onmouseout="mclosetime()"> | ||
+ | <a href="#">News</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="#" | ||
+ | onmouseover="mopen('m2')" | ||
+ | onmouseout="mclosetime()"> | ||
+ | Team</a> | ||
+ | <div id="m2" | ||
+ | onmouseover="mcancelclose()" | ||
+ | onmouseout="mclosetime()"> | ||
+ | <a href="#">Undergraduates</a> | ||
+ | <a href="#">Advisors</a> | ||
+ | <a href="#">About the University</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="#" | ||
+ | onmouseover="mopen('m3')" | ||
+ | onmouseout="mclosetime()"> | ||
+ | Project</a> | ||
+ | <div id="m3" | ||
+ | onmouseover="mcancelclose()" | ||
+ | onmouseout="mclosetime()"> | ||
+ | <a href="#">Project Overview</a> | ||
+ | <a href="#">Advisors</a> | ||
+ | <a href="#">About the University</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li><a href="#" | ||
+ | onmouseover="mopen('m4')" | ||
+ | onmouseout="mclosetime()"> | ||
+ | Notebook and Parts</a> | ||
+ | <div id="m4"> | ||
+ | <a href="#">Notebook</a> | ||
+ | <a href="#">Parts Submitted</a> | ||
+ | <a href="#">Characterization</a> | ||
+ | <a href="#">Protocols and Safety</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#" | ||
+ | onmouseover="mopen('m5')" | ||
+ | onmouseout="mclosetime()"> | ||
+ | Community</a> | ||
+ | <div id="m5"> | ||
+ | <a href="#">Ethics</a> | ||
+ | <a href="#">Outreach</a> | ||
+ | <a href="#">Gallery</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Sponsors</a></li> | ||
+ | </ul> | ||
+ | |||
+ | <br/><br/><br/><br/><br/><br/><br/> | ||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
+ | |||
+ | </html> |
Revision as of 21:43, 8 July 2010