Difference between revisions of "Template:NYU Shanghai"

 
(614 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Template_All_Teams}}
 
−
 
 
<html>
 
<html>
−
<head>
 
−
 
 
<style type="text/css">
 
<style type="text/css">
−
body {
+
@font-face {
−
  padding: 0;
+
    font-family: "HelveticaNT";
−
  margin: 0;
+
    src: url("https://static.igem.org/mediawiki/2015/1/12/NYU_Shanghai_HelveticaNT.otf") format("opentype");
−
  overflow-y: scroll;
+
   }
−
   background: #fff;
+
@font-face {
−
  font-family: Arial;
+
  font-family: "bebasbook";
−
  font-size: 12px;
+
  src: url("https://static.igem.org/mediawiki/2015/1/17/NYU_Shanghai_bebasbook.otf") format("opentype");
 
}
 
}
−
.nav {
+
  @font-face {
−
   margin-left: auto;
+
    font-family: "neon";
−
   margin-right: auto;
+
    src: url("https://static.igem.org/mediawiki/2015/7/77/NYU_Shanghai_NeonLights.ttf") format("truetype");
−
   width: 90%;
+
   }
 +
  @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");
 
}
 
}
−
#nav {
+
   @font-face {
−
   background-color: #222;
+
    font-family: "helveticaNL";
−
}
+
    src: url("https://static.igem.org/mediawiki/2015/8/86/NYU_Shanghai_HelveticaNeue-Light.otf") format("opentype");
−
#nav_wrapper {
+
−
  width: 978px;
+
−
  text-align: left;
+
−
  position: fixed;
+
−
}
+
−
#nav ul {
+
−
  list-style-type: none;
+
−
  padding: 0;
+
−
  margin: 0;
+
−
  margin-top: -10px;
+
−
  //position: fixed;
+
−
  min-width: 200px;
+
−
  background-color: #222;
+
−
}
+
−
#nav ul li {
+
−
  display: inline-block;
+
−
}
+
−
#nav ul li:hover {
+
−
  background-color: #333;
+
−
}
+
−
#nav ul li a, visited {
+
−
  color: #CCC;
+
−
  display: block;
+
−
  padding: 15px;
+
−
  text-decoration: none;
+
−
}
+
−
#nav ul li:hover ul {
+
−
  display: block;
+
−
}
+
−
#nav ul ul {
+
−
  display: none;
+
−
  position: absolute;
+
−
  background-color: #333;
+
−
  border: 5px solid #222;
+
−
  border-top: 0;
+
−
  margin-left: -5px;
+
−
}
+
−
#nav ul ul li {
+
−
  display: block;
+
−
}
+
−
#nav ul ul li a:hover {
+
−
  color: #699;
+
 
}
 
}
 +
  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>
 
</style>
  
−
</head>
+
<script type="text/javascript">
−
<body>
+
  document.onscroll=function(){
−
<div id="nav">
+
                for (var i = document.getElementsByClassName("scrollable").length - 1; i >= 0; i--) {
−
   <div id="global_wrapper">
+
                  document.getElementsByClassName("scrollable")[i].style.marginLeft = "-" + String(document.body.scrollLeft) + "px";
−
     <div id="nav_wrapper">
+
                };
−
        <ul>
+
   };
−
            <li><a href="#">item #1</a>
+
  function reset() {
−
            </li><li>
+
    document.getElementById("project").style.borderWidth = "0px 1px";
−
            <a href="#">item #2</a>
+
     document.getElementById("team").style.borderWidth = "0px 1px";
−
            </li><li>
+
    document.getElementById("outreach").style.borderWidth = "0px 1px";
−
            <a href="#">dropdown #1</a>
+
    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";
 +
    };
 +
  };
  
−
                <ul>
+
  }
−
                    <li><a href="#">dropdown #1 item #1</a>
+
  function revealOutreach() {
−
                    </li>
+
  if (document.getElementById("outreach").className === "resetting") {
−
                    <li><a href="#">dropdown #1 item #2</a>
+
    document.getElementById("outreach").className = "inactive";
−
                    </li>
+
  } else{
−
                    <li><a href="#">dropdown #1 item #3</a>
+
    document.getElementById("outreach-submenu").style.visibility = "visible";
−
                    </li>
+
    document.getElementById("outreach").style.borderWidth = "0px 1px 2px";
−
                </ul>
+
    document.getElementById("outreach").style.borderColor = "black #3cb";
−
            </li><li>
+
    document.getElementById("outreach-span").style.display = "block";
−
            <a href="#">dropdown #2</a>
+
    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>
  
−
                <ul>
+
<div id="nav" class="scrollable">
−
                    <li><a href="#">dropdown #2 item #1</a>
+
  <ul class="noselect">
−
                    </li>
+
    <li>
−
                    <li><a href="#">dropdown #2 item #2</a>
+
      <a href="/Team:NYU_Shanghai">
−
                    </li>
+
      <img src="https://static.igem.org/mediawiki/2015/5/57/NYU_Shanghai_flowerlogo.png" width="30" height="30" style="padding-top: 17px;">
−
                    <li><a href="#">dropdown #2 item #3</a>
+
      </a>
−
                    </li>
+
    </li>
−
                </ul>
+
    <li id="project">
−
            </li>
+
      <h1 id="project-title" class="noselect" onmouseenter="selectProject()" onmouseleave="deselectProject()" onclick="reset();revealProject()"><font color="white">Project</font></h1>
−
            <li> <a href="#">item #3</a>
+
      <ul class="noselect" id="project-submenu">
−
            </li>
+
        <li><a href="/Team:NYU_Shanghai/Design">Design</a></li>
−
         </ul>
+
        <li><a href="/Team:NYU_Shanghai/Parts">Parts</a></li>
−
     </div>
+
        <li><a href="/Team:NYU_Shanghai/Code">Code</a></li>
−
     <!-- Nav wrapper end -->
+
        <li><a href="https://igem.org/2015_Judging_Form?id=1756">Judging</a></li>
−
</div>
+
      </ul>
−
<!-- Nav end -->
+
      <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>
−
<br><br><br><br>
+
<div style="width: 982px; height: 108px;"></div>
 
</body>
 
</body>
 +
</html>

Latest revision as of 01:22, 18 September 2015