Team:KULeuven/Tools/Navigation Bar
From 2008.igem.org
(Difference between revisions)
(New page: {|style="font color="#000000"; background-color:#ffffff; border-spacing:6px; text-align:center" width="960px" !style="text-align:center; background-color:#003E81; border-width:0px; padding...) |
|||
Line 1: | Line 1: | ||
+ | <!-- THE OLD NAVIGATION BAR --> | ||
+ | <noinclude> | ||
{|style="font color="#000000"; background-color:#ffffff; border-spacing:6px; text-align:center" width="960px" | {|style="font color="#000000"; background-color:#ffffff; border-spacing:6px; text-align:center" width="960px" | ||
!style="text-align:center; background-color:#003E81; border-width:0px; padding:3px;"|[[Team:KULeuven|<font color="#ffffff">Home</font>]] | !style="text-align:center; background-color:#003E81; border-width:0px; padding:3px;"|[[Team:KULeuven|<font color="#ffffff">Home</font>]] | ||
Line 8: | Line 10: | ||
!style="text-align:center; background-color:#003E81; border-width:0px; padding:3px;"|[[Team:KULeuven/Notebook|<font color="#ffffff">Notebook</font>]] | !style="text-align:center; background-color:#003E81; border-width:0px; padding:3px;"|[[Team:KULeuven/Notebook|<font color="#ffffff">Notebook</font>]] | ||
|} | |} | ||
+ | </noinclude> | ||
+ | |||
+ | <!-- HERE BEGINS THE ACTUAL NAVIGATION BAR --> | ||
+ | <html> | ||
+ | <!-- HEAD SECTION CONTAINING INLINE CSS AND JAVASCRIPT --> | ||
+ | <head> | ||
+ | |||
+ | <!-- BEGIN OF CSS --> | ||
+ | <style type="text/css"> | ||
+ | #sddm | ||
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 30} | ||
+ | |||
+ | #sddm li | ||
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | font: bold 13px arial} | ||
+ | |||
+ | #sddm li a | ||
+ | { display: block; | ||
+ | margin: 0 2px 0 0; | ||
+ | padding: 4px 20px; | ||
+ | width: auto; | ||
+ | background: #003E81; | ||
+ | color: #FFF; | ||
+ | text-align: center; | ||
+ | text-decoration: none} | ||
+ | |||
+ | #sddm li a:hover | ||
+ | { background: #99CCFF} | ||
+ | |||
+ | #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: #003E81; | ||
+ | color: #FFF; | ||
+ | font: 11px arial} | ||
+ | |||
+ | #sddm div a:hover | ||
+ | { background: #99CCFF; | ||
+ | color: #FFF} | ||
+ | </style> | ||
+ | <!-- END OF CSS --> | ||
+ | |||
+ | <!-- BEGIN OF JAVASCRIPT --> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | 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> | ||
+ | <!-- END OF JAVASCRIPT --> | ||
+ | |||
+ | </head> | ||
+ | <!-- END OF HEAD SECTION --> | ||
+ | |||
+ | <!-- BEGIN OF BODY SECTION CONTAINING THE MENU BUILD UP --> | ||
+ | <body> | ||
+ | |||
+ | <ul id="sddm"> | ||
+ | <!-- HOME SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven" | ||
+ | onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> | ||
+ | |||
+ | </li> | ||
+ | <!-- TEAM SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven/Team" | ||
+ | onmouseover="mopen('m2')" onmouseout="mclosetime()">The Team</a> | ||
+ | |||
+ | </li> | ||
+ | <!-- ROAD MAP SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven/Road_Map" | ||
+ | onmouseover="mopen('m3')" onmouseout="mclosetime()">Road Map</a> | ||
+ | |||
+ | </li> | ||
+ | <!-- PROJECT SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven/Project" | ||
+ | onmouseover="mopen('m4')" onmouseout="mclosetime()">The Project</a> | ||
+ | <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> | ||
+ | <a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <!-- PARTS SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven/Parts" | ||
+ | onmouseover="mopen('m5')" onmouseout="mclosetime()">Parts Submitted to the Registry</a> | ||
+ | |||
+ | </li> | ||
+ | <!-- MODEL SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven/Modeling" | ||
+ | onmouseover="mopen('m5')" onmouseout="mclosetime()">Modeling</a> | ||
+ | |||
+ | </li> | ||
+ | <!-- NOTEBOOK SECTION --> | ||
+ | <li><a href="https://2008.igem.org/Team:KULeuven/Notebook" | ||
+ | onmouseover="mopen('m5')" onmouseout="mclosetime()">Notebook</a> | ||
+ | |||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | </body> | ||
+ | <!-- END OF BODY SECTION --> | ||
+ | </html> | ||
+ | <!-- THAT'S ALL FOLKS! THE END --> |
Revision as of 17:01, 7 July 2008
Home | The Team | Road Map | The Project | Parts Submitted to the Registry | Modeling | Notebook |
---|