Difference between revisions of "Team:UCSC/NavBar"

 
(48 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{:Team:UCSC/CSS}}
 
{{:Team:UCSC/CSS}}
 
<html>
 
<html>
−
<head>
+
 
−
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
<style>
−
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+
 
−
</head>
+
.nav-links-container a {
 +
  transition: 0.3s;
 +
}
 +
 
 +
</style>
 +
 
 
<body>
 
<body>
  
−
  <ul class="topnav" id="myTopnav">
+
<nav class="topnav" id="myTopnav">
−
      <li><a href="https://2018.igem.org/Team:UCSC">Home</a></li>
+
  <a class="nav-logo" href="https://2018.igem.org/Team:UCSC">
−
      <div class="dropdown">
+
    <img class="nav-logo-img" src="https://static.igem.org/mediawiki/2018/6/66/T--UCSC--UCSC_New_Logo.png" alt="PoPPY NavBar Logo" height="45px" width="auto" title="" style="">
−
        <li class="dropbtn"><a href="#">Team</a>
+
  </a>
−
          <i class="fa fa-caret-down"></i>
+
−
        </li>
+
−
        <ul class="dropdown-content">
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Team">Meet the Team</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Collaborations">Collaborations</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Attributions">Attributions</a></li>
+
−
        </ul>
+
−
      </div>
+
−
      <div class="dropdown">
+
−
        <li class="dropbtn"><a href="#">Project</a>
+
−
          <i class="fa fa-caret-down"></i>
+
−
        </li>
+
−
        <ul class="dropdown-content">
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Description">Description</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Metabolic_Engineering">Metabolic Engineering</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Model">Modeling</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Results">Results</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Target_Organism">Target Organism</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:UCSC/Parts">Parts</a></li>
+
−
        </ul>
+
−
      </div>
+
−
      <li><a href="https://2018.igem.org/Team:UCSC/Safety">Safety</a></li>
+
−
      <li><a href="https://2018.igem.org/Team:UCSC/Human_Practices">Human Practices</a></li>
+
−
      <li><a href="https://2018.igem.org/Team:UCSC/Awards">Awards</a></li>
+
−
      <li><a href="https://2018.igem.org/Team:UCSC/Contact">Contact</a></li>
+
−
      <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
+
−
        <i class="fa fa-bars"></i>
+
−
      </a></li>
+
−
  </ul>
+
  
−
   <script type="text/javascript">
+
   <a href="javascript:void(0);" class="menu-icon" onclick="toggleNavbar()">
 +
    <i class="fa fa-bars"></i>
 +
  </a>
  
−
   /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+
   <div class="nav-links-container">
−
  function myFunction() {
+
    <a href="https://2018.igem.org/Team:UCSC">Home</a>
−
      var x = document.getElementById("myTopnav");
+
 
−
      if (x.className === "topnav") {
+
    <div class="dropdown">
−
          x.className += " responsive";
+
      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team
−
      } else {
+
        <i class="fa fa-caret-down"></i>
−
          x.className = "topnav";
+
      </a>
−
      }
+
      <ul class="dropdown-content" id="ddTeam">
 +
        <li><a href="https://2018.igem.org/Team:UCSC/Team">Meet the Team</a></li>
 +
        <li><a href="https://2018.igem.org/Team:UCSC/Collaborations">Collaborations</a></li>
 +
        <li><a href="https://2018.igem.org/Team:UCSC/Partnership">Partnership</a></li>
 +
        <li><a href="https://2018.igem.org/Team:UCSC/Attributions">Attributions</a></li>
 +
        <li><a href="https://2018.igem.org/Team:UCSC/Sponsors">Sponsors</a></li>
 +
      </ul>
 +
    </div>
 +
 
 +
    <div class="dropdown">
 +
    <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project
 +
      <i class="fa fa-caret-down"></i>
 +
    </a>
 +
    <ul class="dropdown-content" id="ddProject">
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Description">Overview</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Design">Design</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Applied_Design">Applied Design</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Experiments">Experiments</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Results">Results</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Demonstrate">Demonstrate</a></li>
 +
<!--      <li><a href="https://2018.igem.org/Team:UCSC/Future">Future</a></li> Add once we determine what future work would be. -->
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Notebook">Notebook</a></li>
 +
    </ul>
 +
    </div>
 +
 
 +
    <div class="dropdown">
 +
    <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices
 +
      <i class="fa fa-caret-down"></i>
 +
    </a>
 +
    <ul class="dropdown-content" id="ddHumanPractices">
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Human_Practices">Outreach</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Public_Engagement">Public Engagement</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Safety">Safety</a></li>
 +
<!--      <li><a href="https://2018.igem.org/Team:UCSC/wtwsk">What The World Should Know</a></li> -->
 +
    </ul>
 +
    </div>
 +
 
 +
    <div class="dropdown">
 +
    <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownNotebook()">Notebook
 +
      <i class="fa fa-caret-down"></i>
 +
    </a>
 +
    <ul class="dropdown-content" id="ddNotebook">
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Notebook">Weekly Overview</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Experiments#Expe_pro">Protocols</a></li>
 +
    </ul>
 +
    </div>
 +
 
 +
    <div class="dropdown">
 +
    <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownParts()">Parts
 +
      <i class="fa fa-caret-down"></i>
 +
    </a>
 +
    <ul class="dropdown-content" id="ddParts">
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Parts">Overview</a></li>
 +
<!--      <li><a href="https://2018.igem.org/Team:UCSC/Part_Collection">Part Collection</a></li> Probably won't use? -->
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>
 +
    </ul>
 +
    </div>
 +
 
 +
    <a href="https://2018.igem.org/Team:UCSC/Judging">Judging</a>
 +
    <a href="https://2018.igem.org/Team:UCSC/Contact">Contact</a>
 +
  </div>
 +
 
 +
</nav>
 +
 
 +
<script type="text/javascript">
 +
 
 +
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 +
function toggleNavbar() {
 +
  var x = document.getElementById("myTopnav");
 +
  if (x.className === "topnav") {
 +
      x.className += " responsive";
 +
  } else {
 +
      x.className = "topnav";
 +
  }
 +
}
 +
 
 +
/* Toggle between adding and removing the "show" class to dropdown when the user clicks on the icon */
 +
function toggleDropdownTeam() {
 +
  if ($(window).width() <= 1200) {
 +
  var x = document.getElementById("ddTeam");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 
   }
 
   }
−
   </script>
+
}
 +
 
 +
function toggleDropdownProject() {
 +
   if ($(window).width() <= 1200) {
 +
  var x = document.getElementById("ddProject");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 
 +
function toggleDropdownHumanPractices() {
 +
  if ($(window).width() <= 1200) {
 +
  var x = document.getElementById("ddHumanPractices");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 
 +
function toggleDropdownNotebook() {
 +
  if ($(window).width() <= 1200) {
 +
  var x = document.getElementById("ddNotebook");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 
 +
function toggleDropdownParts() {
 +
  if ($(window).width() <= 1200) {
 +
  var x = document.getElementById("ddParts");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 
 +
</script>
 +
 
 +
<!-- Fill space so that other pages start underneath the navbar -->
 +
<div class="navFiller" style="height: calc(45px + 0px); width:100%; clear:both;">
 +
</div>
  
−
  </body>
+
</body>
−
  </html>
+
</html>

Latest revision as of 20:52, 17 October 2018