Team:Tuebingen/Templates/TueWikiBase
From 2014.igem.org
(Difference between revisions)
Line 66: | Line 66: | ||
#sponsorSection { | #sponsorSection { | ||
line-height: 900%; | line-height: 900%; | ||
+ | } | ||
+ | |||
+ | /*-------------- DROP DOWN NAVIGATION CSS STARTS HERE --------------*/ | ||
+ | |||
+ | nav { | ||
+ | width: 960px; | ||
+ | } | ||
+ | nav ul { | ||
+ | padding: 0 !important; | ||
+ | margin: 0 !important; | ||
+ | text-align: center; | ||
+ | line-height: 1.5em !important; | ||
+ | box-shadow: 2px 2px 2px #dfdfdf; | ||
+ | -moz-box-shadow: 2px 2px 2px #dfdfdf; | ||
+ | -webkit-box-shadow: 2px 2px 2px #dfdfdf; | ||
+ | } | ||
+ | |||
+ | nav ul:after { | ||
+ | clear: both; | ||
+ | content: " "; | ||
+ | display: block; | ||
+ | font-size: 0; | ||
+ | height: 0 !important; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | nav ul,nav ul li{ | ||
+ | background-color: #FAFAFA; | ||
+ | } | ||
+ | nav ul li { | ||
+ | list-style: none; | ||
+ | float: none; | ||
+ | display: inline-block; | ||
+ | text-align: left; | ||
+ | margin-top: -2px; | ||
+ | margin-left: -5px; | ||
+ | |||
+ | border-right: 2px solid #dfdfdf; | ||
+ | } | ||
+ | nav ul li.cat1 { | ||
+ | border-left: 2px solid #dfdfdf; | ||
+ | } | ||
+ | |||
+ | nav ul li a { | ||
+ | text-decoration: none !important; | ||
+ | display: block; | ||
+ | color: black !important; | ||
+ | padding: 14px 34px 14px 34px !important; | ||
+ | |||
+ | transition: background 0.3s ease-out; /* explorer 10 */ | ||
+ | -webkit-transition: background 0.3s ease-out; /* chrome & safari */ | ||
+ | -moz-transition: background 0.3 ease-out; /* firefox */ | ||
+ | -o-transition: background 0.3 ease-out; /* opera */ | ||
+ | } | ||
+ | |||
+ | nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a { | ||
+ | background-color: #006534; | ||
+ | } | ||
+ | nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a { | ||
+ | background-color: #FF2727; | ||
+ | } | ||
+ | nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a { | ||
+ | background-color: #B20000; | ||
+ | } | ||
+ | nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a { | ||
+ | background-color: #7E0000; | ||
+ | } | ||
+ | nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a { | ||
+ | background-color: #F22100; | ||
+ | } | ||
+ | nav ul li.cat6:hover a, nav ul li.cat6:hover > ul li a { | ||
+ | background-color: #C61E18; | ||
+ | } | ||
+ | nav ul li.cat7:hover a, nav ul li.cat7:hover > ul li a { | ||
+ | background-color: #009766; | ||
+ | } | ||
+ | nav ul li:hover > a { | ||
+ | color: #FAFAFA !important; | ||
+ | text-decoration: none !important; | ||
+ | } | ||
+ | nav ul li:hover > ul { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | nav ul li ul{ | ||
+ | display: inline; | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | padding:0px; | ||
+ | margin-left: 5px !important; | ||
+ | text-align: inherit; | ||
+ | } | ||
+ | nav ul li ul li{ | ||
+ | float: none; | ||
+ | display: block; | ||
+ | } | ||
+ | nav ul li ul li a { | ||
+ | color: #FAFAFA !important; | ||
+ | text-decoration: none !important; | ||
+ | } | ||
+ | nav ul li ul li a:hover{ | ||
+ | color: black!important; | ||
+ | background-color: #FAFAFA !important; | ||
+ | text-decoration: none !important; | ||
} | } | ||
Line 80: | Line 184: | ||
<img src="https://static.igem.org/mediawiki/2014/7/7e/Tue2014_Logo_big_b.png" style="width:850px; left: 45px; top: 110px; position: absolute;"> | <img src="https://static.igem.org/mediawiki/2014/7/7e/Tue2014_Logo_big_b.png" style="width:850px; left: 45px; top: 110px; position: absolute;"> | ||
+ | |||
+ | <div id = "wrapper"> | ||
+ | <nav> | ||
+ | <ul> | ||
+ | <li class = "cat1"> | ||
+ | <a href="#">Home</a> | ||
+ | </li> | ||
+ | <li class = "cat2"> | ||
+ | <a href="#">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Overview</a></li> | ||
+ | <li><a href="#">Motivation</a></li> | ||
+ | <li><a href="#">Inteins</a></li> | ||
+ | <li><a href="#">Enzymes</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = "cat3"> | ||
+ | <a href="#">Team</a> | ||
+ | <ul> | ||
+ | <li><a href="#">About Us</a></li> | ||
+ | <li><a href="#">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = "cat4"> | ||
+ | <a href="#">Notebook</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Protocols</a></li> | ||
+ | <li><a href="#">Lab Journal</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = "cat5"> | ||
+ | <a href="#">Activities</a> | ||
+ | <ul> | ||
+ | <li><a href="#">SynBio-Day</a></li> | ||
+ | <li><a href="#">School-Project</a></li> | ||
+ | <li><a href="#">Aachen Conference</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = "cat6"> | ||
+ | <a href="#">Results</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Shipped Parts</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = "cat7"> | ||
+ | <a href="#">Contact</a> | ||
+ | |||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 21:40, 5 October 2014