Team:UI-Indonesia/header
From 2013.igem.org
(Difference between revisions)
(26 intermediate revisions not shown) | |||
Line 44: | Line 44: | ||
</header> | </header> | ||
- | |||
<div> | <div> | ||
- | < | + | |
+ | <!-- *** Menu Style CSS From MIT 2012, Thankyou..!! :D *** --> | ||
<style> | <style> | ||
- | + | .nav{ | |
- | + | float:left; | |
- | + | width:100%; | |
- | + | margin:0; | |
- | + | list-style:none; | |
- | + | position:relative; | |
- | + | z-index:5; | |
- | + | /*CHANGE THIS TO CENTER*/ | |
- | + | padding:0 185px; /*12px;*/ | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | .nav li{ | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | display:inline; | ||
+ | line-height: 2em; | ||
+ | } | ||
+ | .nav a{ | ||
+ | float:left; | ||
+ | height:2em; | ||
+ | padding: 0 1.3em; | ||
+ | color:white; | ||
+ | /*Padding: bottom, right, top, left */ | ||
+ | /*padding:0.2em 1.3em 0.2em 1.3em;*/ | ||
+ | border-right:1px solid white; | ||
+ | white-space:nowrap; | ||
+ | } | ||
- | + | .nav a:hover{ | |
- | + | color:#00FFFF !important; | |
- | + | } | |
- | + | /*--- DROPDOWN ---*/ | |
+ | .nav ul{ | ||
+ | background:#fff; | ||
+ | list-style:none; | ||
+ | position:absolute; | ||
+ | left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | ||
+ | margin-top: 25px; | ||
+ | margin-left:0; | ||
+ | margin-right:0; | ||
- | + | } | |
- | |||
- | + | .nav ul li{ | |
+ | padding-top:1px; | ||
+ | } | ||
- | + | .nav ul a{ | |
- | + | padding-top: 3px; | |
- | + | padding-bottom:3px; /*Introducing a padding between the li and the a give the illusion spaced items */ | |
+ | white-space:normal; | ||
+ | text-decoration:none; | ||
+ | height:auto; | ||
+ | width: 13em; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
- | + | .nav li:hover ul{ /* Display the dropdown on hover */ | |
- | + | left:0; /* Bring back on-screen when needed */ | |
- | + | text-decoration:none; | |
- | + | } | |
- | + | ||
+ | .nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ | ||
+ | |||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | .nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */ | ||
+ | background:#121212; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | .nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ | ||
+ | background:#8a8a88; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | </style> | ||
+ | <!-- *** End of Menubar CSS style code from MIT, Thankyouuu :D *** --> | ||
+ | |||
+ | <div id="border-top"></div> | ||
+ | <!-- *** Percobaan kode menu dropdown MIT *** --> | ||
+ | <ul class="nav"> | ||
- | <!-- | + | <li><a href="https://2013.igem.org/Team:UI-Indonesia">HOME</a></li> |
- | + | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Team">TEAM</a> | |
+ | <!-- ***<ul> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Member">Members</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Lab">Our Lab</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Gallery">Gallery</a></li> | ||
+ | </ul>*** --> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Description">PROJECT</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Description">Overview</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Abstract">Abstract</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Parts">Parts</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Modelling">Modelling</a></li> | ||
+ | <!-- ***<li><a href="https://2013.igem.org/Team:UI-Indonesia/JudgingForm">Judging Form</a></li>*** --> | ||
+ | </ul></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/July">NOTEBOOK</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/July">July</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/August">August</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/September">September</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Safety">SAFETY</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/HumanPractices">HUMAN PRACTICES</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UI-Indonesia/Attributions">ATTRIBUTIONS</a></li> | ||
+ | </ul> | ||
+ | <hr color:"white";> | ||
</html> | </html> |
Latest revision as of 01:56, 19 October 2013
![](https://static.igem.org/mediawiki/2013/6/67/Header_New_Design.png)