Difference between revisions of "Team:UCSC/NavBar"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
−
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
 
 
</head>
 
</head>
 
<body>
 
<body>
Line 10: Line 8:
 
   <a class="nav-logo" href="https://2018.igem.org/Team:UCSC">
 
   <a class="nav-logo" href="https://2018.igem.org/Team:UCSC">
 
     <img class="nav-logo-img" src="https://static.igem.org/mediawiki/2018/2/2f/T--UCSC--NavbarLogo.png" height="45" width="auto" title="" style="">
 
     <img class="nav-logo-img" src="https://static.igem.org/mediawiki/2018/2/2f/T--UCSC--NavbarLogo.png" height="45" width="auto" title="" style="">
 +
  </a>
 +
 +
  <a href="javascript:void(0);" class="menu-icon" onclick="toggleNavbar()">
 +
    <i class="fa fa-bars"></i>
 
   </a>
 
   </a>
  
Line 16: Line 18:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
−
       <div class="dropbtn"><a href="#">Team</a>
+
       <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team
−
          <i class="fa fa-caret-down"></i>
+
        <i class="fa fa-caret-down"></i>
−
       </div>
+
       </a>
−
       <ul class="dropdown-content">
+
       <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/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/Collaborations">Collaborations</a></li>
Line 27: Line 29:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
−
     <div class="dropbtn"><a href="#">Project</a>
+
     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project
 
       <i class="fa fa-caret-down"></i>
 
       <i class="fa fa-caret-down"></i>
−
     </div>
+
     </a>
−
     <ul class="dropdown-content">
+
     <ul class="dropdown-content" id="ddProject">
 
       <li><a href="https://2018.igem.org/Team:UCSC/Description">The Project</a></li>
 
       <li><a href="https://2018.igem.org/Team:UCSC/Description">The Project</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/Metabolic_Engineering">Metabolic Engineering</a></li>
Line 41: Line 43:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
−
     <div class="dropbtn"><a href="#">Human Practices</a>
+
     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices
 
       <i class="fa fa-caret-down"></i>
 
       <i class="fa fa-caret-down"></i>
−
     </div>
+
     </a>
−
     <ul class="dropdown-content">
+
     <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/Human_Practices">Outreach</a></li>
 
       <li><a href="https://2018.igem.org/Team:UCSC/Safety">Safety</a></li>
 
       <li><a href="https://2018.igem.org/Team:UCSC/Safety">Safety</a></li>
Line 54: Line 56:
 
   </div>
 
   </div>
  
−
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
 
−
    <i class="fa fa-bars"></i>
 
−
  </a>
 
 
</nav>
 
</nav>
  
Line 62: Line 61:
  
 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
−
function myFunction() {
+
function toggleNavbar() {
 
   var x = document.getElementById("myTopnav");
 
   var x = document.getElementById("myTopnav");
 
   if (x.className === "topnav") {
 
   if (x.className === "topnav") {
Line 70: Line 69:
 
   }
 
   }
 
}
 
}
 +
 +
/* Toggle between adding and removing the "show" class to dropdown when the user clicks on the icon */
 +
function toggleDropdownTeam() {
 +
  if ($(window).width() <= 800) {
 +
  var x = document.getElementById("ddTeam");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 +
function toggleDropdownProject() {
 +
  if ($(window).width() <= 800) {
 +
  var x = document.getElementById("ddProject");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 +
function toggleDropdownHumanPractices() {
 +
  if ($(window).width() <= 800) {
 +
  var x = document.getElementById("ddHumanPractices");
 +
  if (x.className === "dropdown-content") {
 +
      x.className += "show";
 +
  } else {
 +
      x.className = "dropdown-content";
 +
  }
 +
  }
 +
}
 +
 
</script>
 
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 18:29, 6 July 2018