Team:Sheffield/Template:Header
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <head> <style> #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki sett...") |
|||
(2 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{Team:Sheffield/JS:jquery}} | ||
+ | |||
<html> | <html> | ||
<head> | <head> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | ||
<style> | <style> | ||
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/ | ||
+ | |||
+ | #top-section { | ||
+ | |||
+ | border: 0 none; | ||
+ | height: 14px; | ||
+ | z-index: 100; | ||
+ | top: 0; | ||
+ | position: fixed; | ||
+ | width: 975px; | ||
+ | left: 50%; | ||
+ | margin-left: -487px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | html, body, .wrapper { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: transparent; | ||
+ | |||
+ | } | ||
+ | |||
+ | .pageContent { | ||
+ | margin: 0; | ||
+ | height: 2000px; | ||
+ | min-width: 1000px; | ||
+ | } | ||
+ | |||
+ | #navigationBar, #navigationBar ul { | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #navigationBar { | ||
+ | position: fixed; | ||
+ | top: 0px; | ||
+ | display: table-row; | ||
+ | width: 100%; | ||
+ | min-width: 1000px; | ||
+ | height: 60px; | ||
+ | list-style: none; | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | -webkit-transition: background-color 0.5s linear; | ||
+ | -moz-transition: background-color 0.5s linear; | ||
+ | -o-transition: background-color 0.5s linear; | ||
+ | transition: background-color 0.5s linear; | ||
+ | } | ||
+ | |||
+ | .menuText { | ||
+ | padding-top: 8px; | ||
+ | } | ||
+ | |||
+ | #navigationBar.scrolling { | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | #navigationBar li { | ||
+ | display: table-cell; | ||
+ | height: 100%; | ||
+ | vertical-align: middle; | ||
+ | float: right; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li:hover > ul { | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | transition-delay:0s; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul { | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | width: 170px; | ||
+ | margin-top: 8px; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.5s linear; | ||
+ | -moz-transition: opacity 0.5s linear; | ||
+ | -o-transition: opacity 0.5s linear; | ||
+ | transition: opacity 0.5s linear; | ||
+ | } | ||
+ | |||
+ | #navigationBar li a { | ||
+ | display: block; | ||
+ | padding: 10px 10px; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | color: white; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #navigationBar li a.scrolling { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #navigationBar li a:hover { | ||
+ | color: #FBA917; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li > a { | ||
+ | background-color: #5E5E5E; | ||
+ | opacity: 0.9; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li > a.scrolling { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #igemLogo { | ||
+ | height: 40px; | ||
+ | opacity: 0.8; | ||
+ | } | ||
+ | |||
+ | #teamLogo { | ||
+ | float: left; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | #teamLogo li a img { | ||
+ | height: 80px; | ||
+ | -webkit-transition: height 0.25s linear; | ||
+ | -moz-transition: height 0.25s linear; | ||
+ | -o-transition: height 0.25s linear; | ||
+ | transition: height 0.25s linear; | ||
+ | } | ||
+ | |||
+ | #teamLogo li a img.scrolling { | ||
+ | height: 40px; | ||
+ | } | ||
</style> | </style> | ||
+ | <script src="jquery-1.11.1.min.js"></script> | ||
+ | <script> | ||
+ | $(window).scroll(function() { | ||
+ | if ($(window).scrollTop() > 0) { | ||
+ | $("#navigationBar").addClass("scrolling"); | ||
+ | $("#navigationBar li a").addClass("scrolling"); | ||
+ | $("#teamLogo li a img").addClass("scrolling"); | ||
+ | $("#navigationBar > li > ul > li > a").addClass("scrolling"); | ||
+ | |||
+ | } else { | ||
+ | $("#navigationBar").removeClass("scrolling"); | ||
+ | $("#navigationBar li a").removeClass("scrolling"); | ||
+ | $("#teamLogo li a img").removeClass("scrolling"); | ||
+ | $("#navigationBar > li > ul > li > a").removeClass("scrolling"); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | </head> | ||
<body> | <body> | ||
- | + | <ul id="navigationBar"> | |
+ | <li><a href=""><img id="igemLogo" src="https://static.igem.org/mediawiki/2014/7/7d/IGEMLogo.png"></a></li> | ||
+ | <li class="menuText"><a href="">Attributions ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">Acknowledgements</a></li> | ||
+ | <li><a href="">Sponsors</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Notebook ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">Protocols</a></li> | ||
+ | <li><a href="">Wet Lab Journal</a></li> | ||
+ | <li><a href="">Dry Lab Journal</a></li> | ||
+ | <li><a href="">Bibliography</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Policy and Practices ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">Socio Bricks</a></li> | ||
+ | <li><a href="">Lab Notation</a></li> | ||
+ | <li><a href="">Industry Collaboration</a></li> | ||
+ | <li><a href="">SynBio at UoS</a></li> | ||
+ | <li><a href="">Outreach</a></li> | ||
+ | <li><a href="">Collaboration</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Results ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">FadR Characterisation</a></li> | ||
+ | <li><a href="">Lipase Assay</a></li> | ||
+ | <li><a href="">Keratinase Assay</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Modelling ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">Product Design</a></li> | ||
+ | <li><a href="">Manufacturing Model</a></li> | ||
+ | <li><a href="">Enzyme Kinetics</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Project ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">Background</a></li> | ||
+ | <li><a href="">Biosensor</a></li> | ||
+ | <li><a href="">Enzyme Synthesis</a></li> | ||
+ | <li><a href="">Enzyme Secretion</a></li> | ||
+ | <li><a href="">Safety</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Team ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="">Meet the Team</a></li> | ||
+ | <li><a href="">Official Team Profile</a></li> | ||
+ | <li><a href="">Gallery</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Home</a></li> | ||
+ | <span id="teamLogo"><li><a href=""><img src="https://static.igem.org/mediawiki/2014/d/da/TeamLogo.png"></a></li></span> | ||
+ | </ul> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 19:45, 13 September 2014