Difference between revisions of "Template:Hawaii/Navbar"
| (34 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
| − | <nav | + | <!-- NAV --> |
| − | <ul> | + | <nav class="main-nav"> |
| − | <li> | + | <ul class="main-ul"> |
| − | + | <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=" | + | <div> |
| − | + | <a href="">MORE</a> | |
| − | + | <ul class="dropdown-content"> | |
| − | + | <li><a href="https://2018.igem.org/Team:Hawaii/Safety">SAFETY</a></li> | |
| − | + | <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> | ||
| − | + | <style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | /* NAV */ | |
| − | + | .main-nav { | |
| − | + | ||
height: 100px; | height: 100px; | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
| − | + | font-family: 'Oswald', sans-serif; | |
| − | + | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| − | background-color: | + | background-color: white; |
| + | position: relative; | ||
| + | z-index: 3; | ||
} | } | ||
| − | + | .main-ul { | |
| − | width: | + | 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; | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | .dropdown { | + | .main-ul li { |
| − | + | 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 { | ||
| − | |||
| − | |||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
background-color: white; | background-color: white; | ||
| − | padding: | + | padding: 0px; |
| + | z-index: 4; | ||
} | } | ||
| − | .dropdown-content | + | .dropdown-content { |
| − | + | 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 111: | Line 120: | ||
justify-content: space-around; | justify-content: space-around; | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
</style> | </style> | ||
</html> | </html> | ||
Latest revision as of 03:58, 18 October 2018