Difference between revisions of "Template:Hawaii/Navbar"

 
(36 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
−
<nav id="top-nav">
+
<!-- NAV -->
−
       <ul>
+
    <nav class="main-nav">
−
         <li>
+
       <ul class="main-ul">
−
          <a href="index.html">Home</a>
+
         <li><a href="https://2018.igem.org/Team:Hawaii">HOME</a></li>
−
         </li>
+
        <li><a href="https://2018.igem.org/Team:Hawaii/Description">PROJECT</a></li>
 +
         <li><a href="https://2018.igem.org/Team:Hawaii/Experiments">EXPERIMENTS</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Notebook">NOTEBOOK</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Parts">PARTS</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Team">TEAM</a></li>
 
         <li class="dropdown">
 
         <li class="dropdown">
−
           <a href="team.html">Team</a>
+
           <div>
−
          <i class="fas fa-angle-down"></i>
+
            <a href="">MORE</a>
−
          <div class="dropdown-content">
+
            <ul class="dropdown-content">
−
            <div><a href="experiments.html">Team Members</a></div>
+
              <li><a href="https://2018.igem.org/Team:Hawaii/Safety">SAFETY</a></li>
−
            <div><a href="notebook.html">Collaborations</a></div>
+
              <li><a href="https://2018.igem.org/Team:Hawaii/Collaborations">COLLABORATIONS</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">HUMAN PRACTICES</a></li>
 +
              <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>
 
         </li>
 
         </li>
 +
      </ul>
 +
    </nav>
  
−
        <li class="dropdown">
+
<style>
−
          <a href="project.html">Project</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="description.html">Description</a></div>
+
−
            <div><a href="design.html">Design</a></div>
+
−
            <div><a href="parts.html">Experiments</a></div>
+
−
            <div><a href="html/notebook.html">Notebook</a></div>
+
−
            <div><a href="interlab.html">Interlab</a></div>
+
−
            <div><a href="model.html">Model</a></div>
+
−
            <div><a href="results.html">Results</a></div>
+
−
            <div><a href="demonstrate.html">Demonstrate</a></div>
+
−
            <div><a href="improve.html">Improve</a></div>
+
−
            <div><a href="attributions.html">Attributions</a></div>
+
−
          </div>
+
−
        </li>
+
−
 
+
−
        <li class="dropdown">
+
−
          <a href="parts.html">Parts</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="parts_overview.html">Parts Overview</a></div>
+
−
            <div><a href="basic_parts.html">Basic Parts</a></div>
+
−
            <div><a href="composite_parts.html">Composite Parts</a></div>
+
−
            <div><a href="part_collection.html">Part Collection</a></div>
+
−
          </div>
+
−
        </li>
+
−
 
+
−
        <li>
+
−
          <a href="safety.html">Safety</a>
+
−
        </li>
+
−
 
+
−
        <li class="dropdown">
+
−
          <a href="html/human.html">Human Practices</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="human.html">Human Practices</a></div>
+
−
            <div><a href="education.html">Education and Engagement</a></div>
+
−
          </div>
+
−
        </li>
+
−
 
+
−
        <li class="dropdown">
+
−
          <a href="html/awards.html">Awards</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="applied_design.html">Applied Design</a></div>
+
−
            <div><a href="entrepreneurship.html">Entrepreneurship</a></div>
+
−
            <div><a href="hardware.html">Hardware</a></div>
+
−
            <div><a href="model.html">Model</a></div>
+
−
            <div><a href="plant.html">Plant</a></div>
+
−
            <div><a href="software.html">Software</a></div>
+
−
        </div>
+
−
      </li>
+
−
    </ul>
+
−
</nav>
+
  
−
<style>
+
/* NAV */
−
#top-nav {
+
.main-nav {
−
  width: 100%;
+
 
   height: 100px;
 
   height: 100px;
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
−
   align-items: center;
+
   font-family: 'Oswald', sans-serif;
−
   letter-spacing: 1px;
+
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 +
  background-color: white;
 +
  position: relative;
 +
  z-index: 3;  
 
}
 
}
−
#top-nav ul {
+
.main-ul {
−
   width: 1100px;
+
   width: 80%;
 
   padding: 0px;
 
   padding: 0px;
 +
  margin: 0px;
 
   display: flex;
 
   display: flex;
 
   justify-content: space-around;
 
   justify-content: space-around;
 
   align-items: center;
 
   align-items: center;
−
  flex-direction: row;
+
 
−
  z-index: 1;
+
 
}
 
}
−
.dropdown {
+
.main-ul li {
−
   position: relative;
+
  list-style-type: none;
 +
  border: none;
 +
  font-size: 20px;
 +
  letter-spacing: 2px;
 +
  height: 100%;
 +
  display: flex;
 +
  align-items: center;
 +
  margin: 0px;
 +
  /* min-width: 150px; */
 +
}
 +
.main-ul a {
 +
  height: 100%;
 +
  width: 100%;
 +
  justify-content: center;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
  display: flex;
 +
  align-items: center;
 +
}
 +
.main-ul a:hover {
 +
  border: none;
 +
  text-decoration: none;
 +
}
 +
.main-ul a:focus {
 +
  border: none;
 +
  text-decoration: none;
 +
}
 +
a {
 +
  text-decoration: none;
 +
  color: rgb(50,50,50);
 +
  margin: 0px;
 +
  padding: 0px;
 +
}
 +
.main-ul a:hover {
 +
  color: white;
 +
  background-color: rgb(30,30,30);
 +
}
 +
.dropdown div {
 +
   height: 100%;
 +
}
 +
.dropdown a {
 +
  text-align: justify;
 +
  height: 100%;
 
}
 
}
 
.dropdown-content {
 
.dropdown-content {
−
  height: auto;
 
−
  width: auto;
 
 
   display: none;
 
   display: none;
 
   position: absolute;
 
   position: absolute;
 
   background-color: white;
 
   background-color: white;
−
   padding: 20px;
+
   padding: 0px;
 +
  z-index: 4;  
 
}
 
}
−
.dropdown-content div {
+
.dropdown-content {
−
   padding-bottom: 10px;
+
   background-color: rgb(220,220,220);
 +
}
 +
.dropdown-content a {
 +
  display: flex;
 +
  justify-content: flex-start;
 
   padding-top: 10px;
 
   padding-top: 10px;
 +
  padding-bottom: 10px;
 +
}
 +
.dropdown-content a:hover {
 +
  background-color: rgb(50,50,50);
 
}
 
}
 
.dropdown:hover .dropdown-content {
 
.dropdown:hover .dropdown-content {
Line 110: Line 120:
 
   justify-content: space-around;
 
   justify-content: space-around;
 
}
 
}
−
.dropdown-content div:hover {
+
 
−
  color: rgb(200,200,200);
+
−
}
+
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 03:58, 18 October 2018