Difference between revisions of "Team:UCSC/NavBar"

 
(15 intermediate revisions by 2 users not shown)
Line 25: Line 25:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
       <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team &#11206;
+
       <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>
 
       </a>
 
       </a>
 
       <ul class="dropdown-content" id="ddTeam">
 
       <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>
 +
        <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/Attributions">Attributions</a></li>
 
         <li><a href="https://2018.igem.org/Team:UCSC/Sponsors">Sponsors</a></li>
 
         <li><a href="https://2018.igem.org/Team:UCSC/Sponsors">Sponsors</a></li>
Line 37: Line 38:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project &#11206;
+
     <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>
 
     </a>
 
     </a>
 
     <ul class="dropdown-content" id="ddProject">
 
     <ul class="dropdown-content" id="ddProject">
       <li><a href="https://2018.igem.org/Team:UCSC/Description">Description</a></li>
+
       <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/Design">Design</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/Applied_Design">Applied Design</a></li>
      <li><a href="https://2018.igem.org/Team:UCSC/Model">Modeling</a></li>
+
 
       <li><a href="https://2018.igem.org/Team:UCSC/Experiments">Experiments</a></li>
 
       <li><a href="https://2018.igem.org/Team:UCSC/Experiments">Experiments</a></li>
      <li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>
 
 
       <li><a href="https://2018.igem.org/Team:UCSC/Results">Results</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/Demonstrate">Demonstrate</a></li>
Line 55: Line 54:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices &#11206;
+
     <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>
 
     </a>
 
     </a>
 
     <ul class="dropdown-content" id="ddHumanPractices">
 
     <ul class="dropdown-content" id="ddHumanPractices">
Line 67: Line 66:
  
 
     <div class="dropdown">
 
     <div class="dropdown">
     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownParts()">Parts &#11206;
+
     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownNotebook()">Notebook
<!--      <i class="fa fa-caret-down"></i> -->
+
      <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>
 
     </a>
 
     <ul class="dropdown-content" id="ddParts">
 
     <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/Parts">Overview</a></li>
      <li><a href="https://2018.igem.org/Team:UCSC/Basic_Part">Basic Parts</a></li>
 
      <li><a href="https://2018.igem.org/Team:UCSC/Composite_Part">Composite Parts</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/Part_Collection">Part Collection</a></li> Probably won't use? -->
 +
      <li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>
 
     </ul>
 
     </ul>
 
     </div>
 
     </div>
Line 98: Line 106:
 
/* Toggle between adding and removing the "show" class to dropdown when the user clicks on the icon */
 
/* Toggle between adding and removing the "show" class to dropdown when the user clicks on the icon */
 
function toggleDropdownTeam() {
 
function toggleDropdownTeam() {
   if ($(window).width() <= 1010) {  
+
   if ($(window).width() <= 1200) {  
 
   var x = document.getElementById("ddTeam");
 
   var x = document.getElementById("ddTeam");
 
   if (x.className === "dropdown-content") {
 
   if (x.className === "dropdown-content") {
Line 109: Line 117:
  
 
function toggleDropdownProject() {
 
function toggleDropdownProject() {
   if ($(window).width() <= 1010) {
+
   if ($(window).width() <= 1200) {
 
   var x = document.getElementById("ddProject");
 
   var x = document.getElementById("ddProject");
 
   if (x.className === "dropdown-content") {
 
   if (x.className === "dropdown-content") {
Line 120: Line 128:
  
 
function toggleDropdownHumanPractices() {
 
function toggleDropdownHumanPractices() {
   if ($(window).width() <= 1010) {
+
   if ($(window).width() <= 1200) {
 
   var x = document.getElementById("ddHumanPractices");
 
   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") {
 
   if (x.className === "dropdown-content") {
 
       x.className += "show";
 
       x.className += "show";
Line 131: Line 150:
  
 
function toggleDropdownParts() {
 
function toggleDropdownParts() {
   if ($(window).width() <= 1010) {
+
   if ($(window).width() <= 1200) {
 
   var x = document.getElementById("ddParts");
 
   var x = document.getElementById("ddParts");
 
   if (x.className === "dropdown-content") {
 
   if (x.className === "dropdown-content") {
Line 144: Line 163:
  
 
<!-- Fill space so that other pages start underneath the navbar -->
 
<!-- Fill space so that other pages start underneath the navbar -->
<div class="navFiller" style="height:45px; width:100%; clear:both;">
+
<div class="navFiller" style="height: calc(45px + 0px); width:100%; clear:both;">
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 20:52, 17 October 2018