Template:Team:Sheffield/NavigationBar
From 2014.igem.org
(Difference between revisions)
(Replaced content with ".subPageTitle { text-align: center; font-family: 'Lato', sans-serif; font-size: 60px; letter-spacing: -2px; color: white; font-weight: 300; margin...") |
|||
Line 1: | Line 1: | ||
- | .subPageTitle { | + | <html> |
+ | <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'> | ||
+ | <script src="http://code.jquery.com/jquery-1.11.1.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function() { // Document ready | ||
+ | $(document).scroll(function() { | ||
+ | if ($(document).scrollTop() > 0) { | ||
+ | $("#navigationBar").addClass("scrolling"); | ||
+ | $("#teamLogo li a img").addClass("scrolling"); | ||
+ | $("#shefUniLogo li a img").addClass("scrolling"); | ||
+ | } else { | ||
+ | $("#navigationBar").removeClass("scrolling"); | ||
+ | $("#teamLogo li a img").removeClass("scrolling"); | ||
+ | $("#shefUniLogo li a img").removeClass("scrolling"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | $(document).ready(function() { // Document ready | ||
+ | $( '.inlink' ).on('click', function(event) { | ||
+ | var target = $(this.hash); | ||
+ | target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top - 60 | ||
+ | }, 1000); | ||
+ | return false; | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <style> | ||
+ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/ | ||
+ | |||
+ | #menubar.left-menu.noprint ul li:last-child { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #top-section { | ||
+ | border: 0 none; | ||
+ | height: 14px; | ||
+ | z-index: 10001; | ||
+ | /*top: 0;*/ | ||
+ | /*position: fixed;*/ | ||
+ | width: 975px; | ||
+ | left: 50%; | ||
+ | margin-left: -487px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, #content { | ||
+ | /*position: fixed;*/ | ||
+ | /*top: 0;*/ | ||
+ | width: 100%; | ||
+ | /*height: 100%;*/ | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | html, body, .wrapper { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/5/5b/BgImgSheffield.jpg'); | ||
+ | background-repeat: repeat; | ||
+ | } | ||
+ | |||
+ | #bodyContent { | ||
+ | background-color: transparent; | ||
+ | /*overflow-y: scroll;*/ | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #navigationBar, #navigationBar ul { | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #navigationBar { | ||
+ | position: fixed; | ||
+ | top: 0px; | ||
+ | display: table-row; | ||
+ | height: 60px; | ||
+ | width: 100%; | ||
+ | min-width: 1400px; | ||
+ | list-style: none; | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-size: 16px; | ||
+ | -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; | ||
+ | z-index: 10000; | ||
+ | } | ||
+ | |||
+ | .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: black; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #navigationBar li span { | ||
+ | } | ||
+ | |||
+ | #navigationBar li span a { | ||
+ | padding: 0; | ||
+ | padding-top: 10px; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | color: black; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #navigationBar li a:hover { | ||
+ | color: #FBA917; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li { | ||
+ | width: 100%; | ||
+ | margin: 0 0 0 0; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li > a { | ||
+ | background-color: #000000; | ||
+ | opacity: 0.9; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #navigationBar > li > ul > li > a:hover { | ||
+ | color: #FBA917; | ||
+ | } | ||
+ | |||
+ | #igemLogo { | ||
+ | height: 40px; | ||
+ | opacity: 0.8; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | #teamLogo, #shefUniLogo { | ||
+ | float: left; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | #teamLogo li a img, #shefUniLogo 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; | ||
+ | } | ||
+ | |||
+ | #shefUniLogo li a img.scrolling { | ||
+ | height: 40px; | ||
+ | } | ||
+ | |||
+ | .socialMediaIcon { | ||
+ | padding: 0px 0px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .socialMediaIcon div { | ||
+ | position: relative; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | } | ||
+ | |||
+ | .whiteIcon, .blackIcon, .colouredIcon { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | } | ||
+ | |||
+ | .blackIcon { | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .colouredIcon { | ||
+ | z-index: 2; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .socialMediaIcon div:hover > .blackIcon { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .socialMediaIcon div:hover > .colouredIcon { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-size: 30px; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .subPageTitle { | ||
text-align: center; | text-align: center; | ||
font-family: 'Lato', sans-serif; | font-family: 'Lato', sans-serif; | ||
Line 14: | Line 265: | ||
padding-top: 5px; | padding-top: 5px; | ||
} | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="topMenu"> | ||
+ | <ul id="navigationBar"> | ||
+ | <li><a href=""><img id="igemLogo" src="https://static.igem.org/mediawiki/2014/7/7d/IGEMLogo.png"></a></li> | ||
+ | <li> | ||
+ | <span> | ||
+ | <a class="socialMediaIcon" href="http://twitter.com/iGEMSheffield"> | ||
+ | <div> | ||
+ | <img class="blackIcon" src="https://static.igem.org/mediawiki/2014/b/b2/TwitterBlack.png"> | ||
+ | <img class="colouredIcon" src="https://static.igem.org/mediawiki/2014/7/78/TwitterColour.png"> | ||
+ | </div> | ||
+ | </a> | ||
+ | </span> | ||
+ | </li> | ||
+ | <li> | ||
+ | <span> | ||
+ | <a class="socialMediaIcon" href="http://www.facebook.com/iGEMSheffield2014"> | ||
+ | <div> | ||
+ | <img class="blackIcon" src="https://static.igem.org/mediawiki/2014/b/b6/FacebookBlack.png"> | ||
+ | <img class="colouredIcon" src="https://static.igem.org/mediawiki/2014/1/1b/FacebookColour.png"> | ||
+ | </div> | ||
+ | </a> | ||
+ | </span> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Attributions ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/acknowlegement">Acknowledgements</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/sponsor">Sponsors</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Notebook ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/LabProtocols">Lab Protocols</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/WetLabJournal">Wet Lab Journal</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/DryLabJournal">Dry Lab Journal</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="">Policy and Practices ▾</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/SocioBrick">SocioBricks</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/Notions">Notions OF Responsibility</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/IndustryCollaboration">Industry Collaboration</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/SynBio">SynBio at UoS</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/LabNotation">Lab Notation</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/outreach">Outreach</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/collaboration">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="https://2014.igem.org/Team:Sheffield/modelling">Product Design</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/manufacture">Manufacturing Model</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/manufacture2">Manufacturing Model2</a></li> | ||
+ | <li><a href="">Enzyme Kinetics</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="https://2014.igem.org/Team:Sheffield/Project">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="https://2014.igem.org/Team:Sheffield/team1">Meet the Team</a></li> | ||
+ | <li><a href="">Official Team Profile</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Sheffield/gallery">Gallery</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="menuText"><a href="https://2014.igem.org/Team:Sheffield/tmp">Home</a></li> | ||
+ | <span id="teamLogo"><li><a href="https://2014.igem.org/Team:Sheffield/tmp"><img src="https://static.igem.org/mediawiki/2014/d/da/TeamLogo.png"></a></li></span> | ||
+ | <span id="shefUniLogo"><li><a href="https://2014.igem.org/Team:Sheffield/tmp"><img src="https://static.igem.org/mediawiki/2014/b/bd/UoSLogo.gif"></a></li></span> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Revision as of 21:39, 17 October 2014