Difference between revisions of "Template:UC Davis/header"

Line 1: Line 1:
 
<html>
 
<html>
 +
 
<head>
 
<head>
 
   <title>iGEM</title>
 
   <title>iGEM</title>
Line 26: Line 27:
 
   /*-------------------------------------------------------------------*/
 
   /*-------------------------------------------------------------------*/
  
−
/*----------------------Header Styling-------------------------*/
+
  /*----------------------Header Styling-------------------------*/
  
 +
  #topnav {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    background-color: #002855;
 +
    list-style: none;
 +
    padding: 40px;
 +
    margin: 0;
 +
  }
  
−
/**/
+
  #topnav li,
−
#topnav {
+
   a {
−
display: flex;
+
    text-decoration: none;
−
justify-content: center;
+
  }
−
align-items: center;
+
−
background-color: #002855;
+
−
list-style: none;
+
−
padding: 40px;
+
−
margin: 0;
+
−
}
+
−
#topnav li, a {
+
−
   text-decoration: none;
+
−
}
+
−
#topnav li:hover, a:hover {
+
−
  text-decoration: none;
+
−
}
+
  
−
#topnav .nav-item:visited {
+
   #topnav li:hover,
−
   color: white;
+
   a:hover {
−
}
+
    text-decoration: none;
−
#topnav .b-nav-item:visited {
+
   }
−
   color: #525b65;
+
−
}
+
−
.dropdown {
+
−
  flex-grow: 1;
+
−
  max-width: 150px;
+
−
  white-space: nowrap;
+
−
  text-align: center;
+
−
}
+
−
.dropdown-main,
+
−
.nav-item {
+
−
   font-size: 15px;
+
−
  color: white;
+
−
}
+
  
−
.dropdown-content {
+
  #topnav .nav-item:visited {
−
display: none;
+
    color: white;
−
position: absolute;
+
  }
−
background-color: #f9f9f9;
+
−
min-width: 200px;
+
−
border-radius: 7px;
+
−
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
z-index: 1;
+
−
}
+
  
−
.dropdown-content a {
+
  #topnav .b-nav-item:visited {
−
float: none;
+
    color: #525b65;
−
font-size: 14px;
+
  }
−
color: #525b65;
+
−
padding: 12px 16px;
+
−
display: block;
+
−
text-align:left;
+
−
}
+
−
.dropdown:hover .dropdown-content {
+
−
display: block;
+
−
}
+
  
−
.dropdown-content a:hover {
+
  .dropdown {
−
color: black;
+
    flex-grow: 1;
−
}
+
    max-width: 150px;
−
#navlogo {
+
    white-space: nowrap;
−
flex-grow: 2;
+
    text-align: center;
−
max-width: 300px;
+
   }
−
}
+
−
.navlogo {
+
−
  display: flex;
+
−
  justify-content: center;
+
−
  align-items: center;
+
−
}
+
−
.navlogo-img {
+
−
   width: 125px;
+
−
  margin-left: -43px;
+
−
  margin-right: -35px;
+
−
  margin-bottom: -7px;
+
−
}
+
−
.logo-word {
+
−
  text-decoration: none;
+
−
color: #d9a900;
+
−
font-size: 24px;
+
−
font-weight: bold;
+
−
}
+
−
/*-----------Burger Menu Styling-------------*/
+
  
−
#topnav .burger {
+
  .dropdown-main,
−
   display: none;
+
   .nav-item {
−
  margin-right: 20px;
+
    font-size: 15px;
−
  color: #d9a900;
+
    color: white;
−
   font-size: 22px;
+
   }
−
}
+
  
−
.burger-content {
+
  .dropdown-content {
−
  display: none;
+
    display: none;
−
  position: absolute;
+
    position: absolute;
−
  background-color: #f9f9f9;
+
    background-color: #f9f9f9;
−
  border-radius: 7px;
+
    min-width: 200px;
−
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+
    border-radius: 7px;
−
  z-index: 1;
+
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
−
   width: 200px;
+
    z-index: 1;
−
  margin-left: -185px;
+
   }
  
−
}
+
  .dropdown-content a {
 +
    float: none;
 +
    font-size: 14px;
 +
    color: #525b65;
 +
    padding: 12px 16px;
 +
    display: block;
 +
    text-align: left;
 +
  }
  
−
.b-dropdown-main {
+
  .dropdown:hover .dropdown-content {
−
font-weight: bold;
+
    display: block;
−
font-size: 15px;
+
   }
−
color: #525b65;
+
−
padding: 12px 16px;
+
−
display: block;
+
−
text-align: left;
+
−
overflow: hidden;
+
−
}
+
−
.b-dropdown-content {
+
−
  display: none;
+
−
  position: block;
+
−
   color: #525b65;
+
−
  padding: 12px;
+
−
}
+
−
.b-dropdown-content a {
+
−
  display: block;
+
−
  padding: 5px;
+
−
  color: #525b65;
+
−
  font-weight: normal;
+
−
  font-size: 14px;
+
  
−
}
+
   .dropdown-content a:hover {
−
#topnav .b-dropdown:hover .b-dropdown-content {
+
    color: black;
−
   display: block;
+
   }
−
}
+
−
#topnav .b-dropdown-content a:hover {
+
−
  color: black;
+
−
}
+
−
#topnav .b-dropdown-content a:visited {
+
−
   color: black;
+
−
}
+
  
−
input[type=checkbox]{
+
  #navlogo {
−
   display: none;
+
    flex-grow: 2;
−
}
+
    max-width: 300px;
−
input[type=checkbox]:checked ~ .burger-content {
+
   }
−
   display: block;
+
 
−
}
+
  .navlogo {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
  }
 +
 
 +
  .navlogo-img {
 +
    width: 125px;
 +
    margin-left: -43px;
 +
    margin-right: -35px;
 +
    margin-bottom: -7px;
 +
   }
 +
 
 +
  .logo-word {
 +
    text-decoration: none;
 +
    color: #d9a900;
 +
    font-size: 24px;
 +
    font-weight: bold;
 +
  }
 +
 
 +
  /*-----------Burger Menu Styling-------------*/
  
−
@media screen and (max-width:730px) {
+
   #topnav .burger {
−
   #topnav li {
+
 
     display: none;
 
     display: none;
 +
    margin-right: 20px;
 +
    color: #d9a900;
 +
    font-size: 22px;
 
   }
 
   }
−
   #topnav {
+
 
−
     justify-content: space-between;
+
   .burger-content {
 +
     display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    border-radius: 7px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 +
    z-index: 1;
 +
    width: 200px;
 +
    margin-left: -185px;
 +
 
 
   }
 
   }
  
−
   #topnav li.burger {
+
   .b-dropdown-main {
 +
    font-weight: bold;
 +
    font-size: 15px;
 +
    color: #525b65;
 +
    padding: 12px 16px;
 
     display: block;
 
     display: block;
 +
    text-align: left;
 +
    overflow: hidden;
 
   }
 
   }
−
   #topnav li#navlogo {
+
 
 +
   .b-dropdown-content {
 +
    display: none;
 +
    position: block;
 +
    color: #525b65;
 +
    padding: 12px;
 +
  }
 +
 
 +
  .b-dropdown-content a {
 
     display: block;
 
     display: block;
−
     flex-grow: 0;
+
     padding: 5px;
 +
    color: #525b65;
 +
    font-weight: normal;
 +
    font-size: 14px;
 +
 
 
   }
 
   }
−
}
 
  
 +
  #topnav .b-dropdown:hover .b-dropdown-content {
 +
    display: block;
 +
  }
 +
 +
  #topnav .b-dropdown-content a:hover {
 +
    color: black;
 +
  }
 +
 +
  #topnav .b-dropdown-content a:visited {
 +
    color: black;
 +
  }
 +
 +
  input[type=checkbox] {
 +
    display: none;
 +
  }
 +
 +
  input[type=checkbox]:checked~.burger-content {
 +
    display: block;
 +
  }
 +
 +
  @media screen and (max-width:730px) {
 +
    #topnav li {
 +
      display: none;
 +
    }
 +
    #topnav {
 +
      justify-content: space-between;
 +
    }
 +
 +
    #topnav li.burger {
 +
      display: block;
 +
    }
 +
    #topnav li#navlogo {
 +
      display: block;
 +
      flex-grow: 0;
 +
    }
 +
  }
 
</style>
 
</style>
 +
 
<body>
 
<body>
 
   <!--______________Top Navigation Bar_________________________-->
 
   <!--______________Top Navigation Bar_________________________-->
−
<ul id="topnav">
+
  <ul id="topnav">
−
<li class="dropdown"><a href="PROJECT" class="dropdown-main">PROJECT</a>
+
    <li class="dropdown"><a href="PROJECT" class="dropdown-main">PROJECT</a>
−
<div class="dropdown-content">
+
      <div class="dropdown-content">
 
         <a href="https://2018.igem.org/Team:UC_Davis/Design">Design</a>
 
         <a href="https://2018.igem.org/Team:UC_Davis/Design">Design</a>
 
         <a href="#">Results</a>
 
         <a href="#">Results</a>
Line 199: Line 217:
 
         <a href="https://2018.igem.org/Team:UC_Davis/InterLab">InterLab</a>
 
         <a href="https://2018.igem.org/Team:UC_Davis/InterLab">InterLab</a>
 
         <a href="https://2018.igem.org/Team:UC_Davis/SupplementalMaterials">Supplementary Material</a>
 
         <a href="https://2018.igem.org/Team:UC_Davis/SupplementalMaterials">Supplementary Material</a>
−
</div>
+
      </div>
−
</li>
+
    </li>
−
<li class="dropdown"><a href="Human-Resources" class="dropdown-main">HUMAN RESOURCES</a>
+
    <li class="dropdown"><a href="Human-Resources" class="dropdown-main">HUMAN RESOURCES</a>
−
<div class="dropdown-content">
+
      <div class="dropdown-content">
 
         <a href="#">Human Practices</a>
 
         <a href="#">Human Practices</a>
 
         <a href="#">Education & Engagement</a>
 
         <a href="#">Education & Engagement</a>
 
         <a href="#">Policy</a>
 
         <a href="#">Policy</a>
−
</div>
+
      </div>
−
</li>
+
    </li>
−
<li class="dropdown"><a href="Parts" class="dropdown-main">PARTS</a>
+
    <li class="dropdown"><a href="Parts" class="dropdown-main">PARTS</a>
−
<div class="dropdown-content">
+
      <div class="dropdown-content">
 
         <a href="#">Parts Overview</a>
 
         <a href="#">Parts Overview</a>
 
         <a href="#">Basic</a>
 
         <a href="#">Basic</a>
 
         <a href="#">Composite</a>
 
         <a href="#">Composite</a>
 
         <a href="#">Parts Collection</a>
 
         <a href="#">Parts Collection</a>
−
</div>
+
      </div>
−
</li>
+
    </li>
 
     <li id="navlogo">
 
     <li id="navlogo">
 
       <a class="navlogo" href="https://2018.igem.org/Team:UC_Davis"><img src="https://static.igem.org/mediawiki/2018/7/73/T--UC_Davis--anchor.png" alt="DNA logo" class="navlogo-img"><b class="logo-word">Cenozoic</b></a>
 
       <a class="navlogo" href="https://2018.igem.org/Team:UC_Davis"><img src="https://static.igem.org/mediawiki/2018/7/73/T--UC_Davis--anchor.png" alt="DNA logo" class="navlogo-img"><b class="logo-word">Cenozoic</b></a>
 
     </li>
 
     </li>
−
<li class="dropdown"><a href="Lab" class="dropdown-main">LAB WORK</a>
+
    <li class="dropdown"><a href="Lab" class="dropdown-main">LAB WORK</a>
−
<div class="dropdown-content">
+
      <div class="dropdown-content">
 
         <a href="#">Experiments</a>
 
         <a href="#">Experiments</a>
 
         <a href="#">Lab Notebook</a>
 
         <a href="#">Lab Notebook</a>
 
         <a href="#">Safety</a>
 
         <a href="#">Safety</a>
−
</div>
+
      </div>
−
</li>
+
    </li>
−
<li class="dropdown"><a href="Team" class="nav-item">TEAM</a>
+
    <li class="dropdown"><a href="Team" class="nav-item">TEAM</a>
 
       <div class="dropdown-content">
 
       <div class="dropdown-content">
 
         <a href="#">Meet the Team</a>
 
         <a href="#">Meet the Team</a>
 
         <a href="#">Attributions</a>
 
         <a href="#">Attributions</a>
 
         <a href="#">Sponsors</a>
 
         <a href="#">Sponsors</a>
−
</div>
+
      </div>
−
  </li>
+
    </li>
−
  <li class="dropdown"><a href="Achievements" class="nav-item">ACHIEVEMENTS</a>
+
    <li class="dropdown"><a href="Achievements" class="nav-item">ACHIEVEMENTS</a>
−
    <div class="dropdown-content">
+
      <div class="dropdown-content">
−
      <a href="#">Medal Requirements</a>
+
        <a href="#">Medal Requirements</a>
−
      <a href="#">Outreach</a>
+
        <a href="#">Outreach</a>
−
    </div>
+
      </div>
−
</li>
+
    </li>
  
−
<!--___________________________________Burger Menu____________________________________________-->
+
    <!--___________________________________Burger Menu____________________________________________-->
−
<li class="burger"><input type="checkbox" id="b-control"><label for="b-control">&#9776;</label>
+
    <li class="burger"><input type="checkbox" id="b-control"><label for="b-control">&#9776;</label>
−
<div class="burger-content">
+
      <div class="burger-content">
−
<div class="b-dropdown"><a href="PROJECT" class="b-dropdown-main">Project</a>
+
        <div class="b-dropdown"><a href="PROJECT" class="b-dropdown-main">Project</a>
−
<div class="b-dropdown-content">
+
          <div class="b-dropdown-content">
 
             <a href="https://2018.igem.org/Team:UC_Davis/Design">Design</a>
 
             <a href="https://2018.igem.org/Team:UC_Davis/Design">Design</a>
 
             <a href="#">Results</a>
 
             <a href="#">Results</a>
Line 250: Line 268:
 
             <a href="https://2018.igem.org/Team:UC_Davis/InterLab">InterLab</a>
 
             <a href="https://2018.igem.org/Team:UC_Davis/InterLab">InterLab</a>
 
             <a href="https://2018.igem.org/Team:UC_Davis/SupplementalMaterials">Supplementary Material</a>
 
             <a href="https://2018.igem.org/Team:UC_Davis/SupplementalMaterials">Supplementary Material</a>
−
</div>
+
          </div>
−
</div>
+
        </div>
−
<div class="b-dropdown"><a href="Human-Resources" class="b-dropdown-main">Human Resources</a>
+
        <div class="b-dropdown"><a href="Human-Resources" class="b-dropdown-main">Human Resources</a>
−
<div class="b-dropdown-content">
+
          <div class="b-dropdown-content">
 
             <a href="#">Human Practices</a>
 
             <a href="#">Human Practices</a>
 
             <a href="#">Education & Engagement</a>
 
             <a href="#">Education & Engagement</a>
 
             <a href="#">Policy</a>
 
             <a href="#">Policy</a>
−
</div>
+
          </div>
−
</div>
+
        </div>
−
<div class="b-dropdown"><a href="Parts" class="b-dropdown-main">Parts</a>
+
        <div class="b-dropdown"><a href="Parts" class="b-dropdown-main">Parts</a>
−
<div class="b-dropdown-content">
+
          <div class="b-dropdown-content">
 
             <a href="#">Parts Overview</a>
 
             <a href="#">Parts Overview</a>
 
             <a href="#">Basic</a>
 
             <a href="#">Basic</a>
 
             <a href="#">Composite</a>
 
             <a href="#">Composite</a>
 
             <a href="#">Parts Collection</a>
 
             <a href="#">Parts Collection</a>
−
</div>
+
          </div>
−
</div>
+
        </div>
−
<div class="b-dropdown"><a href="Lab" class="b-dropdown-main">Lab Work</a>
+
        <div class="b-dropdown"><a href="Lab" class="b-dropdown-main">Lab Work</a>
−
<div class="b-dropdown-content">
+
          <div class="b-dropdown-content">
 
             <a href="#">Experiments</a>
 
             <a href="#">Experiments</a>
 
             <a href="#">Lab Notebook</a>
 
             <a href="#">Lab Notebook</a>
 
             <a href="#">Safety</a>
 
             <a href="#">Safety</a>
−
</div>
+
          </div>
−
</div>
+
        </div>
 
         <div class="b-dropdown"><a href="Team" class="b-dropdown-main">Team</a>
 
         <div class="b-dropdown"><a href="Team" class="b-dropdown-main">Team</a>
−
<div class="b-dropdown-content">
+
          <div class="b-dropdown-content">
 
             <a href="#">Meet the Team</a>
 
             <a href="#">Meet the Team</a>
 
             <a href="#">Advisors</a>
 
             <a href="#">Advisors</a>
 
             <a href="#">Sposors</a>
 
             <a href="#">Sposors</a>
−
</div>
+
          </div>
−
</div>
+
        </div>
 
         <div class="b-dropdown"><a href="Achievements" class="b-dropdown-main">Achievements</a>
 
         <div class="b-dropdown"><a href="Achievements" class="b-dropdown-main">Achievements</a>
−
<div class="b-dropdown-content">
+
          <div class="b-dropdown-content">
 
             <a href="#">Medal Requirements</a>
 
             <a href="#">Medal Requirements</a>
 
             <a href="#">Outreach</a>
 
             <a href="#">Outreach</a>
−
</div>
+
          </div>
−
</div>
+
        </div>
−
</div>
+
      </div>
−
</li>
+
    </li>
−
</ul>
+
  </ul>
−
<!--__________________________________________________________________________________________-->
+
  <!--__________________________________________________________________________________________-->
  
−
<!--______________________________________________________________________________-->
+
  <!--_________________________________________________________-->
  
 
</body>
 
</body>
−
 
  
 
</html>
 
</html>

Revision as of 02:00, 11 August 2018

iGEM