Team:Evry/Template:Menu
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style type="text/css" media="screen"> | ||
+ | #mymenu { margin: 0; padding: 0; } | ||
+ | #mymenu li { margin: 0; padding: 0; | ||
+ | list-style: none; float: left; } | ||
+ | #mymenu li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 80px; background: | ||
+ | #bbbaaa; color: #ffffff; text-align: center; } | ||
+ | #mymenu li a:hover { background: #aaddaa } | ||
+ | #mymenu ul { position: absolute; visibility: hidden; margin: 0; padding: 0; background: | ||
+ | #eeebdd; border: 1px solid #ffffff } | ||
+ | #mymenu ul a { position: relative; display: block; margin: 0; padding: 5px 10px; width: 80px; | ||
+ | text-align: left; background: #eeebdd; color: #000000; } | ||
+ | #mymenu ul a:hover { background: #aaffaa; } | ||
+ | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | //variables' | ||
+ | declarationvar timer = 0;var item = 0; | ||
+ | //function | ||
+ | for opening of submenu elements | ||
+ | function openelement(num){ | ||
+ | //checks whether there is an open submenu | ||
+ | and makes it invisible if(item) | ||
+ | item.style.visibility = 'hidden'; | ||
+ | //shows the chosen submenu element | ||
+ | item = document.getElementById(num); item.style.visibility = 'visible'; } | ||
+ | // function for closing | ||
+ | of submenu elements | ||
+ | function closeelement(){ | ||
+ | //closes the open submenu elements and loads the timer with 500 | ||
+ | mstimer = window.setTimeout('if(item) item.style.visibility = 'hidden';',500); } | ||
+ | //function for keeping the submenu loaded after the end of the 500 ms | ||
+ | timerfunction keepsubmenu(){ window.clearTimeout(timer);} | ||
+ | //hides the visualized menu after clicking outside of its area and expiring of the loaded | ||
+ | timerdocument.onclick = closeelement; | ||
+ | </script> | ||
+ | </head> | ||
+ | |||
<div id="preloader"> | <div id="preloader"> | ||
<div class="loader-gplus"></div> | <div class="loader-gplus"></div> |
Revision as of 16:25, 23 August 2014