Difference between revisions of "Template:Hawaii/Navbar"

 
(22 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<html>
 
<html>
 
<!-- NAV -->
 
<!-- NAV -->
−
  <nav id="main-nav">
+
    <nav class="main-nav">
−
    <ul>
+
       <ul class="main-ul">
−
       <li class="dropdown_outer-container">
+
         <li><a href="https://2018.igem.org/Team:Hawaii">HOME</a></li>
−
         <div>
+
        <li><a href="https://2018.igem.org/Team:Hawaii/Description">PROJECT</a></li>
−
          <a class="list-item_title list-item_title--active" href="https://2018.igem.org/Team:Hawaii">Home</a>
+
         <li><a href="https://2018.igem.org/Team:Hawaii/Experiments">EXPERIMENTS</a></li>
−
         </div>
+
        <li><a href="https://2018.igem.org/Team:Hawaii/Notebook">NOTEBOOK</a></li>
−
      </li>
+
         <li><a href="https://2018.igem.org/Team:Hawaii/Parts">PARTS</a></li>
−
      <li class="dropdown_outer-container">
+
        <li><a href="https://2018.igem.org/Team:Hawaii/Team">TEAM</a></li>
−
         <div>
+
        <li class="dropdown">
−
          <a class="list-item_title list-item_title--active" href="">Project</a>
+
          <div>
−
          <div class="dropdown_inner-container">
+
            <a href="">MORE</a>
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Description">Description</a></div>
+
            <ul class="dropdown-content">
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Design">Design</a></div>
+
              <li><a href="https://2018.igem.org/Team:Hawaii/Safety">SAFETY</a></li>
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Experiments">Experiments</a></div>
+
              <li><a href="https://2018.igem.org/Team:Hawaii/Collaborations">COLLABORATIONS</a></li>
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Notebook">Notebook</a></div>
+
              <li><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">HUMAN PRACTICES</a></li>
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Results">Results</a></div>
+
              <li><a href="https://2018.igem.org/Team:Hawaii/Model">MODELLING</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Demonstrate">DEMONSTRATE</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Attributions">ATTRIBUTIONS</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Characterization">CHARACTERIZATION</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Calendar">CALENDAR</a></li>
 +
            </ul>
 
           </div>
 
           </div>
−
         </div>
+
         </li>
−
 
+
       </ul>
−
      </li>
+
     </nav>
−
       <li class="dropdown_outer-container">
+
−
        <div>
+
−
          <a href="" class="list-item_title list-item_title--active">Parts</a>
+
−
          <div class="dropdown_inner-container">
+
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Parts">Part Overview</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 class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Composite_Parts">Composite Parts</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>
+
−
        </div>
+
−
      </li>
+
−
      <li class="dropdown_outer-container">
+
−
        <div>
+
−
          <a href="" class="list-item_title list-item_title--active">Team</a>
+
−
          <div class="dropdown_inner-container">
+
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Parts">Members</a></div>
+
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Collaborations">Collaborations</a></div>
+
−
          </div>
+
−
        </div>
+
−
      </li>
+
−
      <li class="dropdown_outer-container">
+
−
        <div>
+
−
          <a href=""><i class="fas fa-ellipsis-h"></i></a>
+
−
          <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>
+
−
            <div><a class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Human_Practices">Human Practices</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 class="list-item_link list-item_link--active" href="https://2018.igem.org/Team:Hawaii/Awards">Awards</a></div>
+
−
          </div>
+
−
        </div>
+
−
      </li>
+
−
     </ul>
+
−
  </nav>
+
  
 
<style>
 
<style>
−
body {
+
 
−
  margin: 0px;
+
/* NAV */
−
  font-family: 'Lato', sans-serif;
+
.main-nav {
−
  color: rgb(50,50,50);
+
−
}
+
−
#main-nav {
+
−
  width: 100%;
+
 
   height: 100px;
 
   height: 100px;
−
  background-color: rgb(60,60,60);
 
−
  color: white;
 
 
   display: flex;
 
   display: flex;
−
   justify-content: flex-end;
+
   justify-content: center;
−
   position: absolute;
+
  font-family: 'Oswald', sans-serif;
−
   top: 0px;
+
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
−
   margin-bottom: 100px;
+
   background-color: white;
 +
  position: relative;
 +
   z-index: 3;  
 
}
 
}
−
#main-nav ul {
+
.main-ul {
 +
  width: 80%;
 
   padding: 0px;
 
   padding: 0px;
 
   margin: 0px;
 
   margin: 0px;
−
  width: 55%;
 
 
   display: flex;
 
   display: flex;
−
  flex-direction: row;
 
 
   justify-content: space-around;
 
   justify-content: space-around;
−
   align-items: flex-end;
+
   align-items: center;
 +
 
 
}
 
}
−
#main-nav li {
+
.main-ul li {
−
   width: 100%;
+
   list-style-type: none;
 +
  border: none;
 +
  font-size: 20px;
 +
  letter-spacing: 2px;
 
   height: 100%;
 
   height: 100%;
 
   display: flex;
 
   display: flex;
−
   align-items: flex-end;
+
   align-items: center;
−
   list-style-type: none;
+
   margin: 0px;
 +
  /* min-width: 150px; */
 
}
 
}
−
#main-nav li div {
+
.main-ul a {
−
   margin-bottom: 10px;
+
   height: 100%;
 +
  width: 100%;
 +
  justify-content: center;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
  display: flex;
 +
  align-items: center;
 
}
 
}
−
#main-nav a {
+
.main-ul a:hover {
−
   text-decoration: none;
+
   border: none;  
−
   color: inherit;
+
   text-decoration: none;  
−
  margin-left: 10px;
+
 
}
 
}
−
h3 {
+
.main-ul a:focus {
−
   letter-spacing: 10px;
+
   border: none;
 +
  text-decoration: none;  
 
}
 
}
−
/* NAV */
+
a {
−
.fa-ellipsis-h {
+
  text-decoration: none;
−
   color: rgb(74,74,74);
+
   color: rgb(50,50,50);
−
   background-color: white;
+
   margin: 0px;
−
  border-radius: 200px;
+
   padding: 0px;
−
   padding: 2px;
+
 
}
 
}
−
.dropdown_outer-container {
+
.main-ul a:hover {
−
   position: relative;
+
   color: white;
 +
  background-color: rgb(30,30,30);
 
}
 
}
−
.dropdown_outer-container:hover {
+
.dropdown div {
−
   background-color: white;
+
   height: 100%;
−
  color: rgb(74,74,74);
+
 
}
 
}
−
.dropdown_outer-container:hover .dropdown_inner-container {
+
.dropdown a {
−
   display: flex;
+
   text-align: justify;
−
  flex-direction: column;
+
   height: 100%;
−
   justify-content: space-around;
+
 
}
 
}
−
.dropdown_inner-container {
+
.dropdown-content {
 
   display: none;
 
   display: none;
−
  background-color: white;
 
−
  width: 100%;
 
 
   position: absolute;
 
   position: absolute;
 +
  background-color: white;
 +
  padding: 0px;
 +
  z-index: 4;
 
}
 
}
−
.dropdown_inner-container div {
+
.dropdown-content {
−
   margin-top: 30px;
+
   background-color: rgb(220,220,220);
 
}
 
}
−
.list-item_link--active:hover {
+
.dropdown-content a {
−
   font-weight: bold;
+
  display: flex;
−
   border-bottom: 1px solid grey;
+
  justify-content: flex-start;
 +
   padding-top: 10px;
 +
   padding-bottom: 10px;
 
}
 
}
 +
.dropdown-content a:hover {
 +
  background-color: rgb(50,50,50);
 +
}
 +
.dropdown:hover .dropdown-content {
 +
  display: flex;
 +
  flex-direction: column;
 +
  justify-content: space-around;
 +
}
 +
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 03:58, 18 October 2018