Difference between revisions of "Template:NYU Shanghai"
(643 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
<html> | <html> | ||
+ | <style type="text/css"> | ||
+ | @font-face { | ||
+ | font-family: "HelveticaNT"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/1/12/NYU_Shanghai_HelveticaNT.otf") format("opentype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "bebasbook"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/1/17/NYU_Shanghai_bebasbook.otf") format("opentype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "neon"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/7/77/NYU_Shanghai_NeonLights.ttf") format("truetype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "kabel"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/4/4a/NYU_Shanghai_Kabel.ttf") format("truetype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "bebas"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/a/a1/NYU_Shanghai_Bebas.ttf") format("truetype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "bebasneue"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/5/59/NYU_Shanghai_Bebasneue.otf") format("opentype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "helveticaNL"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/8/86/NYU_Shanghai_HelveticaNeue-Light.otf") format("opentype"); | ||
+ | } | ||
+ | body { | ||
+ | background-color: black; | ||
+ | } | ||
+ | #content { | ||
+ | background-color: black; | ||
+ | color: white; | ||
+ | border: 0; | ||
+ | margin: -6px auto; | ||
+ | padding: 0; | ||
+ | text-align: left; | ||
+ | font-size: 15px; | ||
+ | width: 982px; | ||
+ | } | ||
+ | h1 { | ||
+ | font-family: "bebas"; | ||
+ | font-size: 23px; | ||
+ | text-transform: uppercase; | ||
+ | border: 0; | ||
+ | overflow: visible; | ||
+ | letter-spacing: 0.5px; | ||
+ | } | ||
+ | p, h3, h5 { | ||
+ | font-family: "helveticaNL", Helvetica, Arial, sans-serif; | ||
+ | overflow: visible; | ||
+ | } | ||
+ | .firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | .noselect { | ||
+ | -webkit-touch-callout: none; | ||
+ | -webkit-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | .noselect:hover { | ||
+ | cursor: default; | ||
+ | } | ||
+ | .scrollable { | ||
+ | } | ||
− | + | #nav { | |
− | + | width: 982px; | |
− | + | height: 110px; | |
− | + | background-color: black; | |
− | + | z-index: +100; | |
− | + | position: fixed; | |
− | + | margin: -6px 0; | |
− | + | font-family: "bebas"; | |
− | + | font-size: 20px; | |
− | + | text-align: center; | |
− | + | overflow-x: hidden; | |
− | + | overflow-y: hidden; | |
− | + | letter-spacing: 0.5px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | #nav ul { | |
− | + | margin: 0 auto; | |
− | + | width: 100%; | |
− | + | } | |
+ | #nav li { | ||
+ | display: inline-block; | ||
+ | text-decoration: none; | ||
+ | margin: 0px 30px; | ||
+ | padding: 0px 5px; | ||
+ | z-index: 2; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | #nav h1 { | ||
+ | margin: 0px; | ||
+ | margin-top: 0.25em; | ||
+ | margin-bottom: 0.25em; | ||
+ | } | ||
+ | #nav p { | ||
+ | margin: 0 auto; | ||
+ | display: block; | ||
+ | color: white; | ||
+ | padding: 10px 10px; | ||
+ | } | ||
+ | #nav ul ul { | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | margin: 0 auto; | ||
+ | width: 982px; | ||
+ | background: black; | ||
+ | left: 0px; | ||
+ | padding: 0px; | ||
+ | font-size: 18px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | #nav ul ul li { | ||
+ | margin: 4px 40px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | #nav ul ul a { | ||
+ | margin: 0 auto; | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | padding: 3px 5px; | ||
+ | } | ||
+ | #nav ul li span { | ||
+ | height: 50px; | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | z-index: -2; | ||
+ | background-color: black; | ||
+ | } | ||
+ | #project { | ||
+ | width: 100px; | ||
+ | border-style: solid; | ||
+ | border-color: black; | ||
+ | border-width: 0px 1px; | ||
+ | } | ||
+ | #project ul { | ||
+ | border-style: solid; | ||
+ | border-color: goldenrod; | ||
+ | border-width: 1px 0px; | ||
+ | } | ||
+ | #project a:hover { | ||
+ | color: goldenrod; | ||
+ | } | ||
− | + | #team { | |
− | + | width: 76px; | |
− | + | border-style: solid; | |
− | + | border-color: black; | |
− | + | border-width: 0px 1px; | |
− | + | } | |
− | + | #team ul { | |
− | + | border-style: solid; | |
− | + | border-color: #80f; | |
− | + | border-width: 1px 0px; | |
+ | } | ||
+ | #team a:hover { | ||
+ | color: #80f; | ||
+ | } | ||
+ | #outreach { | ||
+ | width: 114px; | ||
+ | border-style: solid; | ||
+ | border-color: black; | ||
+ | border-width: 0px 1px; | ||
+ | } | ||
+ | #outreach ul { | ||
+ | border-style: solid; | ||
+ | border-color: #3cb; | ||
+ | border-width: 1px 0px; | ||
+ | } | ||
+ | #outreach a:hover { | ||
+ | color: #3cb; | ||
+ | } | ||
− | + | #notebook { | |
− | + | width: 114px; | |
+ | border-style: solid; | ||
+ | border-color: black; | ||
+ | border-width: 0px 1px; | ||
+ | } | ||
+ | #notebook ul { | ||
+ | border-style: solid; | ||
+ | border-color: #d66; | ||
+ | border-width: 1px 0px; | ||
+ | } | ||
+ | #notebook a:hover { | ||
+ | color: #d66; | ||
+ | } | ||
+ | </style> | ||
− | + | <script type="text/javascript"> | |
− | + | document.onscroll=function(){ | |
− | + | for (var i = document.getElementsByClassName("scrollable").length - 1; i >= 0; i--) { | |
− | + | document.getElementsByClassName("scrollable")[i].style.marginLeft = "-" + String(document.body.scrollLeft) + "px"; | |
+ | }; | ||
+ | }; | ||
+ | function reset() { | ||
+ | document.getElementById("project").style.borderWidth = "0px 1px"; | ||
+ | document.getElementById("team").style.borderWidth = "0px 1px"; | ||
+ | document.getElementById("outreach").style.borderWidth = "0px 1px"; | ||
+ | document.getElementById("notebook").style.borderWidth = "0px 1px"; | ||
+ | document.getElementById("project").style.borderColor = "black"; | ||
+ | document.getElementById("team").style.borderColor = "black"; | ||
+ | document.getElementById("outreach").style.borderColor = "black"; | ||
+ | document.getElementById("notebook").style.borderColor = "black"; | ||
+ | document.getElementById("project-submenu").style.visibility = "hidden"; | ||
+ | document.getElementById("team-submenu").style.visibility = "hidden"; | ||
+ | document.getElementById("outreach-submenu").style.visibility = "hidden"; | ||
+ | document.getElementById("notebook-submenu").style.visibility = "hidden"; | ||
+ | document.getElementById("project-span").style.display = "none"; | ||
+ | document.getElementById("team-span").style.display = "none"; | ||
+ | document.getElementById("outreach-span").style.display = "none"; | ||
+ | document.getElementById("notebook-span").style.display = "none"; | ||
+ | if (document.getElementsByClassName("active").length > 0) { | ||
+ | document.getElementsByClassName("active")[0].className = "resetting"; | ||
+ | }; | ||
+ | } | ||
+ | function revealProject() { | ||
+ | if (document.getElementById("project").className === "resetting") { | ||
+ | document.getElementById("project").className = "inactive"; | ||
+ | } else{ | ||
+ | document.getElementById("project-submenu").style.visibility = "visible"; | ||
+ | document.getElementById("project").style.borderWidth = "0px 1px 2px"; | ||
+ | document.getElementById("project").style.borderColor = "black goldenrod"; | ||
+ | document.getElementById("project-span").style.display = "block"; | ||
+ | document.getElementById("project").className = "active"; | ||
+ | if (document.getElementsByClassName("resetting").length > 0) { | ||
+ | document.getElementsByClassName("resetting")[0].className = "inactive"; | ||
+ | }; | ||
+ | }; | ||
+ | } | ||
+ | function revealTeam() { | ||
+ | if (document.getElementById("team").className === "resetting") { | ||
+ | document.getElementById("team").className = "inactive"; | ||
+ | } else{ | ||
+ | document.getElementById("team-submenu").style.visibility = "visible"; | ||
+ | document.getElementById("team").style.borderWidth = "0px 1px 2px"; | ||
+ | document.getElementById("team").style.borderColor = "black #80f"; | ||
+ | document.getElementById("team-span").style.display = "block"; | ||
+ | document.getElementById("team").className = "active"; | ||
+ | if (document.getElementsByClassName("resetting").length > 0) { | ||
+ | document.getElementsByClassName("resetting")[0].className = "inactive"; | ||
+ | }; | ||
+ | }; | ||
− | + | } | |
− | + | function revealOutreach() { | |
− | + | if (document.getElementById("outreach").className === "resetting") { | |
− | + | document.getElementById("outreach").className = "inactive"; | |
− | + | } else{ | |
− | + | document.getElementById("outreach-submenu").style.visibility = "visible"; | |
− | + | document.getElementById("outreach").style.borderWidth = "0px 1px 2px"; | |
− | + | document.getElementById("outreach").style.borderColor = "black #3cb"; | |
− | + | document.getElementById("outreach-span").style.display = "block"; | |
− | + | document.getElementById("outreach").className = "active"; | |
− | + | if (document.getElementsByClassName("resetting").length > 0) { | |
− | + | document.getElementsByClassName("resetting")[0].className = "inactive"; | |
− | + | }; | |
− | + | }; | |
− | + | } | |
− | + | function revealNotebook() { | |
− | + | if (document.getElementById("notebook").className === "resetting") { | |
− | + | document.getElementById("notebook").className = "inactive"; | |
− | + | } else{ | |
− | + | document.getElementById("notebook-submenu").style.visibility = "visible"; | |
− | + | document.getElementById("notebook").style.borderWidth = "0px 1px 2px"; | |
− | + | document.getElementById("notebook").style.borderColor = "black #d66"; | |
− | + | document.getElementById("notebook-span").style.display = "block"; | |
− | + | document.getElementById("notebook").className = "active"; | |
− | + | if (document.getElementsByClassName("resetting").length > 0) { | |
− | + | document.getElementsByClassName("resetting")[0].className = "inactive"; | |
− | + | }; | |
− | + | }; | |
− | + | } | |
− | + | function selectProject() { | |
− | + | if (document.getElementById("project").className === "active") { | |
− | + | return; | |
+ | } else{ | ||
+ | document.getElementById("project").style.borderColor = "black goldenrod"; | ||
+ | }; | ||
+ | } | ||
+ | function selectTeam() { | ||
+ | if (document.getElementById("team").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("team").style.borderColor = "black #80f"; | ||
+ | }; | ||
+ | } | ||
+ | function selectOutreach() { | ||
+ | if (document.getElementById("outreach").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("outreach").style.borderColor = "black #3cb"; | ||
+ | }; | ||
+ | } | ||
+ | function selectNotebook() { | ||
+ | if (document.getElementById("notebook").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("notebook").style.borderColor = "black #d66"; | ||
+ | }; | ||
+ | } | ||
+ | function deselectProject() { | ||
+ | if (document.getElementById("project").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("project").style.borderColor = "black"; | ||
+ | }; | ||
+ | } | ||
+ | function deselectTeam() { | ||
+ | if (document.getElementById("team").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("team").style.borderColor = "black"; | ||
+ | }; | ||
+ | } | ||
+ | function deselectOutreach() { | ||
+ | if (document.getElementById("outreach").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("outreach").style.borderColor = "black"; | ||
+ | }; | ||
+ | } | ||
+ | function deselectNotebook() { | ||
+ | if (document.getElementById("notebook").className === "active") { | ||
+ | return; | ||
+ | } else{ | ||
+ | document.getElementById("notebook").style.borderColor = "black"; | ||
+ | }; | ||
+ | } | ||
+ | </script> | ||
− | + | <div id="nav" class="scrollable"> | |
− | + | <ul class="noselect"> | |
+ | <li> | ||
+ | <a href="/Team:NYU_Shanghai"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/5/57/NYU_Shanghai_flowerlogo.png" width="30" height="30" style="padding-top: 17px;"> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li id="project"> | ||
+ | <h1 id="project-title" class="noselect" onmouseenter="selectProject()" onmouseleave="deselectProject()" onclick="reset();revealProject()"><font color="white">Project</font></h1> | ||
+ | <ul class="noselect" id="project-submenu"> | ||
+ | <li><a href="/Team:NYU_Shanghai/Design">Design</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Parts">Parts</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Code">Code</a></li> | ||
+ | <li><a href="https://igem.org/2015_Judging_Form?id=1756">Judging</a></li> | ||
+ | </ul> | ||
+ | <span id="project-span"></span> | ||
+ | </li> | ||
+ | <li id="team"> | ||
+ | <h1 id="team-title" class="noselect" onmouseenter="selectTeam()" onmouseleave="deselectTeam()" onclick="reset();revealTeam()"><font color="white">Team</font></h1> | ||
+ | <ul id="team-submenu" class="noselect"> | ||
+ | <li><a href="/Team:NYU_Shanghai/Members">Members</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Partners">Partners</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | <span id="team-span"></span> | ||
+ | </li> | ||
+ | <li id="outreach"> | ||
+ | <h1 id="outreach-title" class="noselect" onmouseenter="selectOutreach()" onmouseleave="deselectOutreach()" onclick="reset();revealOutreach()"><font color="white">Outreach</font></h1> | ||
+ | <ul id="outreach-submenu" class="noselect"> | ||
+ | <li><a href="/Team:NYU_Shanghai/Collaborations">Collaborations</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Practices">Practices</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/VirtualReality">Virtual Reality</a></li> | ||
+ | </ul> | ||
+ | <span id="outreach-span"></span> | ||
+ | </li> | ||
+ | <li id="notebook"> | ||
+ | <h1 id="notebook-title" class="noselect" onmouseenter="selectNotebook()" onmouseleave="deselectNotebook()" onclick="reset();revealNotebook()"><font color="white">Notebook</font></h1> | ||
+ | <ul id="notebook-submenu" class="noselect"> | ||
+ | <li><a href="/Team:NYU_Shanghai/DailyNotes">Daily Notes</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Protocols">Protocols</a></li> | ||
+ | <li><a href="/Team:NYU_Shanghai/Bibliography">Bibliography</a></li> | ||
+ | </ul> | ||
+ | <span id="notebook-span"></span> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div style="width: 982px; height: 108px;"></div> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 01:22, 18 September 2015