Difference between revisions of "Template:Hawaii/Navbar"

Line 2: Line 2:
  
 
<html>
 
<html>
−
<nav id="top-nav">
+
<nav>
−
      <ul>
+
    <ul>
−
        <li>
+
      <li class="dropdown_outer-container">
−
           <a href="https://2018.igem.org/Team:Hawaii">Home</a>
+
        <div>
−
         </li>
+
           <a class="list-item_title list-item_title--active" href="https://2018.igem.org/Team:Hawaii">Home</a>
−
        <li class="dropdown">
+
         </div>
−
           <a href="https://2018.igem.org/Team:Hawaii/Team">Team</a>
+
      </li>
−
          <i class="fas fa-angle-down"></i>
+
      <li class="dropdown_outer-container">
−
          <div class="dropdown-content">
+
        <div>
−
             <div><a href="https://2018.igem.org/Team:Hawaii/Team">Team Members</a></div>
+
           <a class="list-item_title list-item_title--active" href="">Project</a>
−
             <div><a href="https://2018.igem.org/Team:Hawaii/Collaborations">Collaborations</a></div>
+
          <div class="dropdown_inner-container">
 +
            <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>
−
         </li>
+
         </div>
  
−
        <li class="dropdown">
+
      </li>
−
           <a href="https://2018.igem.org/Team:Hawaii/Description">Project</a>
+
      <li class="dropdown_outer-container">
−
          <i class="fas fa-angle-down"></i>
+
        <div>
−
           <div class="dropdown-content">
+
           <a href="" class="list-item_title list-item_title--active">Parts</a>
−
             <div><a href="https://2018.igem.org/Team:Hawaii/Description">Description</a></div>
+
           <div class="dropdown_inner-container">
−
            <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/Parts">Part Overview</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/Basic_Parts">Basic 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/Composite_Parts">Composite Parts</a></div>
−
             <div><a href="https://2018.igem.org/Team:Hawaii/Interlab">Interlab</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/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>
−
         </li>
+
         </div>
−
 
+
      </li>
−
        <li class="dropdown">
+
      <li class="dropdown_outer-container">
−
           <a href="https://2018.igem.org/Team:Hawaii/Parts">Parts</a>
+
        <div>
−
          <i class="fas fa-angle-down"></i>
+
           <a href="" class="list-item_title list-item_title--active">Team</a>
−
           <div class="dropdown-content">
+
           <div class="dropdown_inner-container">
−
             <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/Parts">Members</a></div>
−
            <div><a href="https://2018.igem.org/Team:Hawaii/Basic_Part">Basic Parts</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/Composite_Partl">Composite Parts</a></div>
+
−
            <div><a href="https://2018.igem.org/Team:Hawaii/Part_Collectionl">Part Collection</a></div>
+
 
           </div>
 
           </div>
−
         </li>
+
         </div>
−
 
+
      </li>
−
         <li>
+
      <li class="dropdown_outer-container">
−
           <a href="https://2018.igem.org/Team:Hawaii/Safety">Safety</a>
+
         <div>
−
        </li>
+
           <a href=""><i class="fas fa-ellipsis-h"></i></a>
−
 
+
          <div class="dropdown_inner-container">
−
        <li class="dropdown">
+
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Safety">Safety</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/Human_Practices">Human Practices</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/Parts">Part Overview</a></div>
−
          <div class="dropdown-content">
+
             <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Awards">Awards</a></div>
−
             <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>
−
#top-nav {
+
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: center;
+
   justify-content: flex-end;
−
  align-items: center;
+
−
  letter-spacing: 1px;
+
 
}
 
}
−
#top-nav ul {
+
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;
−
   z-index: 1;
+
   justify-content: space-around;
 +
  align-items: flex-end;
 
}
 
}
−
.dropdown {
+
li {
−
   position: relative;
+
   width: 100%;
 +
  height: 100%;
 +
  display: flex;
 +
  align-items: flex-end;
 +
  list-style-type: none;
 
}
 
}
−
.dropdown-content {
+
li div {
−
   height: auto;
+
  margin-bottom: 10px;
−
   width: auto;
+
}
−
   display: none;
+
a {
−
   position: absolute;
+
   text-decoration: none;
 +
   color: inherit;
 +
   margin-left: 10px;
 +
}
 +
h3 {
 +
  letter-spacing: 10px;
 +
}
 +
 
 +
/* NAV */
 +
.fa-ellipsis-h {
 +
   color: rgb(74,74,74);
 
   background-color: white;
 
   background-color: white;
−
   padding: 20px;
+
  border-radius: 200px;
 +
   padding: 2px;
 
}
 
}
−
.dropdown-content div {
+
.dropdown_outer-container {
−
   padding-bottom: 10px;
+
   position: relative;
−
  padding-top: 10px;
+
 
}
 
}
−
.dropdown:hover .dropdown-content {
+
.dropdown_outer-container:hover {
 +
  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-content div:hover {
+
.dropdown_inner-container {
−
   color: rgb(200,200,200);
+
  display: none;
 +
  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:51, 24 June 2018