Difference between revisions of "Template:Hawaii/Navbar"

Line 2: Line 2:
  
 
<html>
 
<html>
−
<nav>
+
<nav id="top-nav">
−
    <ul>
+
      <ul>
−
      <li class="dropdown_outer-container">
+
        <li>
−
        <div>
+
           <a href="https://2018.igem.org/Team:Hawaii">Home</a>
−
           <a class="list-item_title list-item_title--active" href="https://2018.igem.org/Team:Hawaii">Home</a>
+
         </li>
−
         </div>
+
        <li class="dropdown">
−
      </li>
+
           <a href="https://2018.igem.org/Team:Hawaii/Team">Team</a>
−
      <li class="dropdown_outer-container">
+
          <i class="fas fa-angle-down"></i>
−
        <div>
+
          <div class="dropdown-content">
−
           <a class="list-item_title list-item_title--active" href="">Project</a>
+
             <div><a href="https://2018.igem.org/Team:Hawaii/Team">Team Members</a></div>
−
          <div class="dropdown_inner-container">
+
             <div><a href="https://2018.igem.org/Team:Hawaii/Collaborations">Collaborations</a></div>
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Description">Description</a></div>
+
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Design">Design</a></div>
+
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Experiments">Experiments</a></div>
+
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Notebook">Notebook</a></div>
+
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Results">Results</a></div>
+
 
           </div>
 
           </div>
−
         </div>
+
         </li>
  
−
      </li>
+
        <li class="dropdown">
−
      <li class="dropdown_outer-container">
+
           <a href="https://2018.igem.org/Team:Hawaii/Description">Project</a>
−
        <div>
+
          <i class="fas fa-angle-down"></i>
−
           <a href="" class="list-item_title list-item_title--active">Parts</a>
+
           <div class="dropdown-content">
−
           <div class="dropdown_inner-container">
+
             <div><a href="https://2018.igem.org/Team:Hawaii/Description">Description</a></div>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Parts">Part Overview</a></div>
+
            <div><a href="https://2018.igem.org/Team:Hawaii/Design">Design</a></div>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Basic_Parts">Basic Parts</a></div>
+
             <div><a href="https://2018.igem.org/Team:Hawaii/Experiments">Experiments</a></div>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Composite_Parts">Composite Parts</a></div>
+
            <div><a href="https://2018.igem.org/Team:Hawaii/Notebook">Notebook</a></div>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Part_Collection">Part Collection</a></div>
+
             <div><a href="https://2018.igem.org/Team:Hawaii/Interlab">Interlab</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Model">Model</a></div>
 +
             <div><a href="https://2018.igem.org/Team:Hawaii/Results">Results</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Demonstrate">Demonstrate</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Improve">Improve</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Attributions">Attributions</a></div>
 
           </div>
 
           </div>
−
         </div>
+
         </li>
−
      </li>
+
 
−
      <li class="dropdown_outer-container">
+
        <li class="dropdown">
−
        <div>
+
           <a href="https://2018.igem.org/Team:Hawaii/Parts">Parts</a>
−
           <a href="" class="list-item_title list-item_title--active">Team</a>
+
          <i class="fas fa-angle-down"></i>
−
           <div class="dropdown_inner-container">
+
           <div class="dropdown-content">
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Parts">Members</a></div>
+
             <div><a href="https://2018.igem.org/Team:Hawaii/Parts">Parts Overview</a></div>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Collaborations">Collaborations</a></div>
+
            <div><a href="https://2018.igem.org/Team:Hawaii/Basic_Part">Basic Parts</a></div>
 +
             <div><a href="https://2018.igem.org/Team:Hawaii/Composite_Partl">Composite Parts</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Part_Collectionl">Part Collection</a></div>
 
           </div>
 
           </div>
−
         </div>
+
         </li>
−
      </li>
+
 
−
      <li class="dropdown_outer-container">
+
         <li>
−
         <div>
+
           <a href="https://2018.igem.org/Team:Hawaii/Safety">Safety</a>
−
           <a href=""><i class="fas fa-ellipsis-h"></i></a>
+
        </li>
−
          <div class="dropdown_inner-container">
+
 
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Safety">Safety</a></div>
+
        <li class="dropdown">
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Human_Practices">Human Practices</a></div>
+
          <a href="https://2018.igem.org/Team:Hawaii/Human_Practices">Human Practices</a>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Parts">Part Overview</a></div>
+
          <i class="fas fa-angle-down"></i>
−
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Awards">Awards</a></div>
+
          <div class="dropdown-content">
 +
             <div><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">Human Practices</a></div>
 +
             <div><a href="https://2018.igem.org/Team:Hawaii/Public_Engagement">Public Engagement</a></div>
 
           </div>
 
           </div>
 +
        </li>
 +
 +
        <li class="dropdown">
 +
          <a href="">Awards</a>
 +
          <i class="fas fa-angle-down"></i>
 +
          <div class="dropdown-content">
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Applied_Design">Applied Design</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Entrepreneurship">Entrepreneurship</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Hardware">Hardware</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Model">Model</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Plant">Plant</a></div>
 +
            <div><a href="https://2018.igem.org/Team:Hawaii/Software">Software</a></div>
 
         </div>
 
         </div>
 
       </li>
 
       </li>
 
     </ul>
 
     </ul>
−
  </nav>
+
</nav>
  
 
<style>
 
<style>
−
nav {
+
#top-nav {
 
   width: 100%;
 
   width: 100%;
 
   height: 100px;
 
   height: 100px;
−
  position: absolute;
 
−
  background-color: rgb(60,60,60);
 
−
  color: white;
 
 
   display: flex;
 
   display: flex;
−
   justify-content: flex-end;
+
   justify-content: center;
 +
  align-items: center;
 +
  letter-spacing: 1px;
 
}
 
}
−
ul {
+
#top-nav ul {
 +
  width: 1100px;
 
   padding: 0px;
 
   padding: 0px;
−
  margin: 0px;
 
−
  width: 55%;
 
 
   display: flex;
 
   display: flex;
 +
  justify-content: space-around;
 +
  align-items: center;
 
   flex-direction: row;
 
   flex-direction: row;
−
   justify-content: space-around;
+
   z-index: 1;
−
  align-items: flex-end;
+
 
}
 
}
−
li {
+
.dropdown {
−
   width: 100%;
+
   position: relative;
−
  height: 100%;
+
−
  display: flex;
+
−
  align-items: flex-end;
+
−
  list-style-type: none;
+
 
}
 
}
−
li div {
+
.dropdown-content {
−
  margin-bottom: 10px;
+
   height: auto;
−
}
+
   width: auto;
−
a {
+
   display: none;
−
   text-decoration: none;
+
   position: absolute;
−
   color: inherit;
+
−
   margin-left: 10px;
+
−
}
+
−
h3 {
+
−
  letter-spacing: 10px;
+
−
}
+
−
 
+
−
/* NAV */
+
−
.fa-ellipsis-h {
+
−
   color: rgb(74,74,74);
+
 
   background-color: white;
 
   background-color: white;
−
  border-radius: 200px;
+
   padding: 20px;
−
   padding: 2px;
+
 
}
 
}
−
.dropdown_outer-container {
+
.dropdown-content div {
−
   position: relative;
+
   padding-bottom: 10px;
 +
  padding-top: 10px;
 
}
 
}
−
.dropdown_outer-container:hover {
+
.dropdown:hover .dropdown-content {
−
  background-color: white;
+
−
  color: rgb(74,74,74);
+
−
}
+
−
.dropdown_outer-container:hover .dropdown_inner-container {
+
 
   display: flex;
 
   display: flex;
 
   flex-direction: column;
 
   flex-direction: column;
 
   justify-content: space-around;
 
   justify-content: space-around;
 
}
 
}
−
.dropdown_inner-container {
+
.dropdown-content div:hover {
−
  display: none;
+
   color: rgb(200,200,200);
−
  background-color: white;
+
−
  width: 100%;
+
−
  position: absolute;
+
−
}
+
−
.dropdown_inner-container div {
+
−
  margin-top: 30px;
+
−
}
+
−
.list-item_link--active:hover {
+
−
   font-weight: bold;
+
−
  border-bottom: 1px solid grey;
+
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 01:52, 24 June 2018