Team:Warsaw
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <html> | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title>Warsaw Team</title> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
<style> | <style> | ||
- | + | html{font-family:Tahoma, Geneva, sans-serif} | |
- | #menu{position:absolute | + | #menu{position:absolute} |
- | #menu ul{list-style:none | + | #menu ul{list-style:none} |
- | #menu ul li{display: block;float:left; | + | #menu ul li {overflow:hidden;margin-left:1px;display:block;background:#222;height:30px;width:155px;text-align:center;float:left;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;} |
- | #menu ul li:hover{ | + | #menu ul li:hover {background:#666;} |
- | #menu ul li a{color: #fff; display: table-cell; vertical-align: middle; text-align: center; width: | + | #menu ul li a{color:#fff;text-decoration:none;display:table-cell;vertical-align:middle;text-align:center;height:30px;width:290px;} |
- | -o-transition: all 0.3s ease-in-out; | + | #menu ul li ul{margin-left:-1px !important;padding:0px !important} |
- | #menu ul li | + | #menu .hover{overflow:visible !important;} |
- | #menu ul li | + | |
- | #menu ul li | + | #left-menu{clear:both;float:left;} |
- | # | + | #left-menu ul{list-style:none;margin:0px !important} |
- | + | #left-menu ul li {overflow:hidden;margin-left:1px;display:block;background:#ddd;height:30px;width:152px;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;} | |
+ | #left-menu ul li:hover {background:#666;} | ||
+ | #left-menu ul li a{color:#222;text-decoration:none;display:table-cell;vertical-align:middle;text-align:center;height:30px;width:122px;} | ||
+ | #left-menu ul li a:hover{color:#fff} | ||
+ | #main-content{float:left;background-color:#fff;width:775px;height:775px;margin-left:10px} | ||
+ | #main-content div{display:none;} | ||
+ | #main-content div#tab1{display:inline} | ||
</style> | </style> | ||
+ | <script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script> | ||
+ | <script> | ||
+ | $(function(){ | ||
+ | $("#menu li").hover( | ||
+ | function () { | ||
+ | a=$(this).find("ul"); | ||
+ | b=$(this); | ||
+ | a.stop(true,false).animate({opacity:1}, 200,function(){b.addClass("hover");}); | ||
+ | }, | ||
+ | function () { | ||
+ | a=$(this).find("ul"); | ||
+ | b=$(this); | ||
+ | a.delay(1000).animate({opacity:0}, 300,function(){b.removeClass("hover");}); | ||
+ | } | ||
+ | ); | ||
+ | $("#left-menu li").click(function(){ | ||
+ | rel=$(this).attr("rel"); | ||
+ | $("#main-content div").stop(true,false).animate({opacity:0}, 200,function(){ | ||
+ | $("#main-content div").css("display","none"); | ||
+ | $("#"+rel).css("display","inline"); | ||
+ | $("#"+rel).stop(true,false).animate({opacity:1}, 200); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $("#menu ul li ul li").click(function(){ | ||
+ | rel=$(this).attr("rel"); | ||
+ | if(rel!="") | ||
+ | { | ||
+ | $("#main-content div").stop(true,false).animate({opacity:0}, 200,function(){ | ||
+ | $("#main-content div").css("display","none"); | ||
+ | $("#"+rel).css("display","inline"); | ||
+ | $("#"+rel).stop(true,false).animate({opacity:1}, 200); | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | <noscript> | ||
+ | <style> | ||
+ | #menu ul li:hover {overflow:visible} <!-- alternatywna tresc strony, ktora zostanie wyswietlona w sytuacji, gdy skrypt nie zostanie uruchomiony --> | ||
+ | </style> | ||
+ | </noscript> | ||
<div id="menu"> | <div id="menu"> | ||
- | <ul> | + | <ul> |
- | <li><a href="https:// | + | <li><a href="https://2012.igem.org/Team:Warsaw/Project">PROJECT</a> |
- | < | + | <!-- <ul> |
- | <ul> | + | <li><a href="#">Pozycja 1</a></li> |
- | <li><a href=" | + | <li><a href="#">Pozycja 1</a></li> |
- | <li><a href=" | + | <li><a href="#">Pozycja 1</a></li> |
- | <li><a href=" | + | <li><a href="#">Pozycja 1</a></li> |
- | <li><a href=" | + | </ul> --> |
- | <li><a href="https:// | + | </li> |
- | < | + | <li><a href="https://2012.igem.org/Team:Warsaw/Wetlab">WETLAB</a> |
- | </ | + | <!-- <ul> |
- | </li> | + | <li><a href="#">Pozycja 1</a></li> |
- | + | <li><a href="#">Pozycja 1</a></li> | |
- | <li><a href=" | + | <li><a href="#">Pozycja 1</a></li> |
- | <li><a href=" | + | <li><a href="#">Pozycja 1</a></li> |
- | <li><a href=" | + | </ul> --> |
- | <li><a href="https://2012.igem.org/Team:Warsaw/ | + | </li> |
- | <li><a href=" | + | <li><a href="https://2012.igem.org/Team:Warsaw/Project">SAFETY</a></li> |
- | < | + | <!-- <li><a href="#">Pozycja 1</a></li> --> |
- | <ul> | + | <li><a href="#">TEAM</a> |
- | <li><a href=" | + | <ul> |
- | <li><a href="https:// | + | <li rel="Team"><a href="#">Team</a></li> |
- | <li><a href="https:// | + | <li rel="Sponsors"><a href="#">Sponsors</a></li> |
- | < | + | </ul> |
- | + | </li> | |
- | + | <li><a href="https://2012.igem.org/Team:Warsaw/Notebook">NOTEBOOK</a></li> | |
- | </ul> | + | <li><a href="https://2012.igem.org/Team:Warsaw/Attributions">ATTRIBUTIONS</a></li> |
+ | <!-- Home,Team,Official Team Profile, Project, Parts Submitted to the Registry, Modelling, Notebook, Safety, Attributions --> | ||
+ | </ul> | ||
</div> | </div> | ||
- | |||
- | <br /><br /><br /><br | + | <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <div id="left-menu"> | |
- | + | <ul> | |
- | + | <li rel="Team"><a href="#" >Team</a></li> | |
- | + | <li rel="Sponsors"><a href="#" >Sonsors</a></li> | |
- | + | <!-- <li rel="tab3"><a href="#" >Pozycja 3</a></li> | |
- | + | <li rel="tab4"><a href="#" >Pozycja 4</a></li> --> | |
+ | </ul> | ||
</div> | </div> | ||
+ | |||
+ | <div id="main-content"> | ||
+ | <div id="Team"> | ||
+ | Test 1 | ||
+ | </div> | ||
+ | <div id="Sponsors"> | ||
+ | Test 2 | ||
+ | </div> | ||
+ | <div id="tab3"> | ||
+ | Test 3 | ||
+ | </div> | ||
+ | <div id="tab4"> | ||
+ | Test 4 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
+ | </html> |
Revision as of 14:54, 14 September 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Test 1
Test 2
Test 3
Test 4