Team:UESTC
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
- | + | <head> | |
- | + | <title>header</title> | |
- | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
- | * | + | <!-- web fonts for the team name and navigation bar --> |
+ | <link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'> | ||
+ | <script src="https://2013.igem.org/Team:UESTC/js/libs/modernizr-2.0.6.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <style type="text/css"> | ||
+ | /* | ||
+ | * for footer moving cloud | ||
*/ | */ | ||
- | + | #experiment{ | |
- | + | position: fixed; | |
- | + | bottom: 0px; | |
+ | z-index: 5; | ||
+ | |||
+ | } | ||
+ | #background { | ||
+ | background-color:#467FBC; | ||
+ | background: url('https://2013.igem.org/File:Cloud_back.png') repeat-x; | ||
+ | background: url('https://static.igem.org/mediawiki/2013/7/70/UESTC_cloud2.png') 5% 5%, url('https://static.igem.org/mediawiki/2013/3/33/Cloud_front.jpg') 50% 50%, url('https://2013.igem.org/File:Cloud_back.png') 90% 110% repeat-x; | ||
+ | top: 78%; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | position: fixed; | ||
+ | -webkit-transition: left 300s linear; | ||
+ | -moz-transition: left 300s linear; | ||
+ | -o-transition: left 300s linear; | ||
+ | -ms-transition: left 300s linear; | ||
+ | transition: left 300s linear; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | body:target #background { | ||
+ | left: -5000px; | ||
+ | } | ||
+ | |||
+ | body:hover #background { | ||
+ | left: -9999px; | ||
} | } | ||
/* | /* | ||
- | * | + | * logo and navigation style |
*/ | */ | ||
- | # | + | #logo{ |
- | position: | + | position: relative; |
- | + | float:left; | |
- | + | width:11.538%; /* 150/1300 */ | |
- | z-index: | + | left:5%; |
+ | top:0px; | ||
+ | z-index: 100; | ||
} | } | ||
- | + | #team_bg{ | |
- | + | position: relative; | |
- | + | float:left; | |
- | + | width:64.28%; /* 900/1300*/ | |
- | width: | + | left: 6%; /* 200/1200 */ |
- | + | top:5px; | |
- | + | z-index: 100; | |
+ | } | ||
+ | #igem_logo{ | ||
+ | position: relative; | ||
+ | width: 12.307%; /* 160/1300 */ | ||
+ | float:left; | ||
+ | left:7%; | ||
+ | top:10px; | ||
+ | z-index: 100; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | # | + | nav{ |
- | + | position:relative; | |
- | } | + | z-index: 50; |
+ | top:9px; | ||
+ | left: 0%; | ||
+ | } | ||
+ | .toggleMenu { | ||
+ | display: none; | ||
+ | background: #666; | ||
+ | padding: 10px 15px; | ||
+ | color: #fff; | ||
+ | position: absolute; | ||
+ | top: 83px; | ||
+ | left: 0px; | ||
+ | } | ||
+ | .nav { | ||
+ | display: inline-block; | ||
+ | list-style: none; | ||
+ | *zoom: 1; | ||
+ | background:#335599; | ||
+ | border-radius:10px; /*some css3*/ | ||
+ | -moz-border-radius:10px; | ||
+ | -webkit-border-radius:10px; | ||
+ | box-shadow:0 2px 2px rgba(0,0,0, .5); | ||
+ | -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); | ||
+ | -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); | ||
+ | width:57%; | ||
+ | height: 54px; | ||
+ | } | ||
+ | .nav:before, | ||
+ | .nav:after { | ||
+ | content: " "; | ||
+ | display: block; | ||
+ | } | ||
+ | .nav:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .nav ul { | ||
+ | list-style: none; | ||
+ | width: 9em; | ||
+ | } | ||
+ | .nav a { | ||
+ | padding: 10px 15px; | ||
+ | color:#fff; | ||
+ | border-radius:10px; /*some css3*/ | ||
+ | -moz-border-radius:10px; | ||
+ | -webkit-border-radius:10px; | ||
+ | text-shadow:0 2px 2px rgba(0,0,0, .7); | ||
+ | } | ||
+ | .nav .current a, .nav li:hover > a { | ||
+ | background:#7788aa url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png') repeat-x 0 -20px; | ||
+ | color:#000; | ||
+ | border-top:1px solid #f8f8f8; | ||
+ | text-decoration:none; | ||
+ | box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ | ||
+ | -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); | ||
+ | -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); | ||
+ | text-shadow:0 2px 2px rgba(255,255,255, 0.7); | ||
+ | } | ||
+ | .nav li { | ||
+ | position: relative; | ||
+ | } | ||
+ | .nav > li { | ||
+ | float: left; | ||
+ | border-top: 1px solid #335599; | ||
+ | } | ||
+ | .nav > li > .parent { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: right; | ||
+ | } | ||
+ | .nav > li > a { | ||
+ | display: block; | ||
+ | } | ||
+ | .nav li ul { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | } | ||
+ | .nav > li.hover > ul { | ||
+ | left: 0; | ||
+ | } | ||
+ | .nav li li.hover ul { | ||
+ | left: 100%; | ||
+ | top: 0; | ||
+ | } | ||
+ | .nav li li a { | ||
+ | display: block; | ||
+ | background: #335599; | ||
+ | position: relative; | ||
+ | z-index:100; | ||
+ | border-top: 1px solid #175e4c; | ||
+ | } | ||
+ | .nav li li li a { | ||
+ | background:#335599; | ||
+ | z-index:200; | ||
+ | border-top: 1px solid #1d7a62; | ||
+ | } | ||
+ | .nav ul li:first-child > a { | ||
+ | -moz-border-radius-topleft:10px; /*some css3*/ | ||
+ | -moz-border-radius-topright:10px; | ||
+ | -webkit-border-top-left-radius:10px; | ||
+ | -webkit-border-top-right-radius:10px; | ||
+ | } | ||
+ | .nav ul li:last-child > a { | ||
+ | -moz-border-radius-bottomleft:10px; /*some css3*/ | ||
+ | -moz-border-radius-bottomright:10px; | ||
+ | -webkit-border-bottom-left-radius:10px; | ||
+ | -webkit-border-bottom-right-radius:10px; | ||
+ | } | ||
+ | .nav ul { | ||
+ | padding:0; | ||
+ | width:170px; | ||
+ | background-color:#335599; | ||
+ | border:1px solid #7788aa; | ||
- | + | border-radius:10px; /*some css3*/ | |
- | + | -moz-border-radius:10px; | |
- | + | -webkit-border-radius:10px; | |
- | + | box-shadow:0 2px 2px rgba(0,0,0, .5); | |
- | + | -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); | |
- | + | -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | -moz-transition:opacity .25s linear, visibility .1s linear .1s; | |
- | + | -webkit-transition:opacity .25s linear, visibility .1s linear .1s; | |
- | + | -o-transition:opacity .25s linear, visibility .1s linear .1s; | |
+ | transition:opacity .25s linear, visibility .1s linear .1s; | ||
+ | } | ||
+ | /* | ||
+ | * media query for responsible drop menu | ||
+ | */ | ||
+ | @media screen and (max-width: 768px) { | ||
+ | #team_bg{ | ||
+ | display:none; | ||
+ | } | ||
+ | #footer_box{ | ||
+ | display:none; | ||
+ | } | ||
+ | #footer{ | ||
+ | display: none; | ||
+ | } | ||
+ | #menubar{ | ||
+ | display: none; | ||
+ | } | ||
+ | #logo img{ | ||
+ | max-width:130px; | ||
+ | height:auto; | ||
+ | } | ||
+ | #igem_logo img{ | ||
+ | max-width:130px; | ||
+ | height:auto; | ||
+ | } | ||
+ | #igem_logo{ | ||
+ | left: 40% | ||
+ | } | ||
+ | .active { | ||
+ | display: block; | ||
} | } | ||
- | + | nav{ | |
- | + | top: 51px; | |
- | + | ||
} | } | ||
- | + | .nav > li { | |
- | + | background-color:#457EBC; | |
- | + | float: none; | |
} | } | ||
- | + | .nav > li > .parent { | |
- | + | background-position: 95% 50%; | |
- | + | ||
} | } | ||
- | + | .nav li li .parent { | |
- | + | background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png'); | |
- | + | background-repeat: no-repeat; | |
- | + | background-position: 95% 50%; | |
} | } | ||
- | + | .nav ul { | |
- | + | display: block; | |
- | + | width: 100%; | |
+ | position:relative; | ||
+ | top:130px; | ||
} | } | ||
- | + | .nav > li.hover > ul , .nav li li.hover ul { | |
- | + | position: static; | |
- | + | ||
- | + | ||
} | } | ||
- | + | } | |
- | + | </style> | |
- | + | <script type="text/javascript"> | |
- | + | var _gaq = _gaq || []; | |
- | + | _gaq.push(['_setAccount', 'UA-36212355-2']); | |
- | + | _gaq.push(['_trackPageview']); | |
- | + | ||
- | + | ||
- | + | (function() { | |
- | + | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
- | + | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
- | + | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
+ | })(); | ||
+ | |||
+ | var ww = document.body.clientWidth; | ||
- | + | $(document).ready(function() { | |
- | + | $(".nav li a").each(function() { | |
- | + | if ($(this).next().length > 0) { | |
- | + | $(this).addClass("parent"); | |
- | + | }; | |
- | + | }) | |
- | + | ||
- | + | $(".toggleMenu").click(function(e) { | |
- | + | e.preventDefault(); | |
- | + | $(this).toggleClass("active"); | |
+ | $(".nav").toggle(); | ||
+ | }); | ||
+ | adjustMenu(); | ||
+ | }) | ||
- | + | $(window).bind('resize orientationchange', function() { | |
- | + | ww = document.body.clientWidth; | |
- | + | adjustMenu(); | |
- | + | }); | |
- | + | var adjustMenu = function() { | |
- | + | if (ww < 768) { | |
- | + | $(".toggleMenu").css("display", "inline-block"); | |
+ | if (!$(".toggleMenu").hasClass("active")) { | ||
+ | $(".nav").hide(); | ||
+ | } else { | ||
+ | $(".nav").show(); | ||
+ | } | ||
+ | $(".nav li").unbind('mouseenter mouseleave'); | ||
+ | $(".nav li a.parent").unbind('click').bind('click', function(e) { | ||
+ | // must be attached to anchor element to prevent bubbling | ||
+ | e.preventDefault(); | ||
+ | $(this).parent("li").toggleClass("hover"); | ||
+ | }); | ||
+ | } | ||
+ | else if (ww >= 768) { | ||
+ | $(".toggleMenu").css("display", "none"); | ||
+ | $(".nav").show(); | ||
+ | $(".nav li").removeClass("hover"); | ||
+ | $(".nav li a").unbind('click'); | ||
+ | $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { | ||
+ | // must be attached to li so that mouseleave is not triggered when hover over submenu | ||
+ | $(this).toggleClass('hover'); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | + | </script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | </head> | |
- | + | <!--header--> | |
- | + | <body> | |
- | + | <div id="experiment"> | |
- | + | <div id="background"></div> | |
- | + | </div> | |
- | + | ||
- | + | <div id="logo"><a href="https://2013.igem.org/Team:UESTC"><img src="https://static.igem.org/mediawiki/2013/a/aa/UESTC_logo2.png"/></a></div> | |
- | + | <div id="team_bg"><img src="https://static.igem.org/mediawiki/2013/7/7b/UESTC_teambg1.jpg" /></div> | |
- | + | <div id="igem_logo"><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/3/3a/UESTC_igemlogo1.png" /></a></div> | |
- | + | <nav> | |
- | + | <a class="toggleMenu" href="#">Menu</a> | |
- | + | <ul class="nav"> | |
- | + | <li> | |
- | + | <a href="https://2013.igem.org/Team:UESTC">Home</a> | |
- | + | </li> | |
- | + | <li> | |
- | + | <a href="https://2013.igem.org/Team:UESTC/team_info.html">Team Info</a> | |
- | + | <ul> | |
- | + | <li><a href="https://2013.igem.org/Team:UESTC/team_info.html#greeting">Greetings</a></li> | |
- | + | <li><a href="https://2013.igem.org/Team:UESTC/team_info.html#member">Member</a></li> | |
- | + | <li><a href="https://2013.igem.org/Team:UESTC/team_info.html#contact">Contact Us</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | / | + | <li> |
- | + | <a href="https://2013.igem.org/Team:UESTC/project.html">Project</a> | |
- | + | <ul> | |
- | + | <li><a href="https://2013.igem.org/Team:UESTC/project.html#overview">Overview</a></li> | |
- | + | <li> | |
- | + | <a href="https://2013.igem.org/Team:UESTC/Attributions.html">Attributions</a> | |
- | + | <ul> | |
- | + | <li><a href="https://2013.igem.org/Team:UESTC/Attributions.html#Academic Reference">Academic Reference</a></li> | |
- | + | <li><a href="https://2013.igem.org/Team:UESTC/Attributions.html#Material Source">Material Source</a></li> | |
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/project.html#project1">Blueprint</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/project.html#project2">Transpeeder</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/project.html#project3">iBricks</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:UESTC/notebook.html">Notebook</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/notebook.html#minutes">Minutes</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/notebook.html#photo">Photos</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/notebook.html#video">Videos</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UESTC/notebook.html#work_distribution">Work Distribution</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:UESTC/Medal Fufillment.html">Medal Fufillment</a> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:UESTC/human practice.html">Human Practice</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
- | + | </body> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</html> | </html> | ||
- |
Revision as of 23:32, 20 August 2013