User:Vinoo/2014Design6
From 2014.igem.org
< User:Vinoo(Difference between revisions)
m (Created page with "<html> <style type="text/css"> /* Setting things up */ body { padding: 2em; } a { text-decoration: none; color: #fff; } - →Important stuff: nav { position: relative; ...") |
m |
||
(55 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | /* | + | #topNav { /*-- creates styled 100% width fixed navigation bar --*/ |
- | + | width: 100%; | |
- | + | position: fixed; | |
+ | top: 14px; | ||
+ | height: 50px; | ||
+ | background-color: #f0f0f0; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | z-index: 1000; | ||
} | } | ||
- | + | ||
- | + | #navContainer { /*-- creates centered container for nav bar --*/ | |
- | + | width: 975px; | |
+ | height: 100%; | ||
+ | margin: 0px auto; | ||
+ | position: relative; | ||
+ | font-family: Arial, sans-serif; | ||
} | } | ||
- | /* | + | .navLinks { /*-- clears style for nav bar ul --*/ |
+ | margin: 0px; | ||
+ | height: 100%; | ||
+ | } | ||
- | + | .navLinks li { /*-- styles nav bar li, the nav bar elements --*/ | |
- | + | display: table-cell; | |
+ | font-size: 12px; | ||
+ | height: 100%; | ||
+ | margin: 0px; | ||
+ | padding: 0px 20px; | ||
+ | border: 1px solid #000; | ||
} | } | ||
- | . | + | |
- | + | ||
- | + | .navLinks li:hover { | |
- | + | background-color: #fff; | |
+ | border: 1px solid #ccc; | ||
+ | border-bottom: 1px solid #fff; | ||
} | } | ||
- | + | ||
- | + | .navSingleLink:hover { | |
- | + | border-bottom: 1px solid #ccc; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .navLinks li > a { /*-- styles the links within the nav bar li --*/ | |
- | + | text-decoration: none; | |
- | + | color: #000; height: 100%; display: block; width: 100%; border: 1px solid #000; | |
- | + | } | |
- | // | + | |
- | + | ||
- | + | ||
- | } | + | |
- | + | .navDropMenu { /*-- the drop down box --*/ | |
- | + | width: 100%; | |
- | + | position: absolute; | |
- | + | top: 50px; | |
- | + | left: 0px; | |
- | + | display: none; | |
+ | background-color: #fff; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | z-index: -100; | ||
+ | padding: 20px 0px; | ||
+ | border: 1px solid #ccc; | ||
+ | } | ||
- | + | .navDropMenu a {border: 1px solid #000; display: inline-block; color: red;} | |
- | + | ||
- | </html> | + | .navDropMenu li { /*-- the drop down box --*/ |
+ | display: block; | ||
+ | float: none; | ||
+ | list-style: none; | ||
+ | height: auto; | ||
+ | padding: 3px 6px; | ||
+ | margin: 0px; | ||
+ | border: 0px; | ||
+ | } | ||
+ | .navDropMenu li:hover { | ||
+ | border: 0px; | ||
+ | } | ||
+ | |||
+ | .navDropMenu li a { /*-- styles the links within the nav bar li --*/ | ||
+ | text-decoration: none; | ||
+ | color: #333; | ||
+ | display: block; | ||
+ | height: auto; | ||
+ | line-height: normal; | ||
+ | padding: 4px 0px 4px 6px; | ||
+ | } | ||
+ | |||
+ | .navDropMenu li a:hover { /*-- styles the links within the nav bar li --*/ | ||
+ | background-color: #f0f0f0; | ||
+ | color: #484848; | ||
+ | } | ||
+ | |||
+ | .navLinks > li:hover > .navDropMenu { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .menuHeader { border-bottom: 1px solid #ccc; display: block; font-weight: bold;} | ||
+ | </style> | ||
+ | </head> | ||
+ | <div id="top-section-bar"></div> | ||
+ | <header id="topNav"> | ||
+ | <nav id="navContainer"> | ||
+ | <ul class="navLinks"> | ||
+ | <li id="navSingleLink"> | ||
+ | <a href="https://2014.igem.org"><img src="https://static.igem.org/mediawiki/2014/d/d4/Logo2014.png" style="height: 49px;" /></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">ABOUT</a> | ||
+ | <div class="navDropMenu"> | ||
+ | </html>{{Nav/About}}<html> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#" class="dropToggle">COMPETITION</a> | ||
+ | <div class="navDropMenu"> | ||
+ | </html>{{Nav/Competition}}<html> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">RESOURCES</a> | ||
+ | <div class="navDropMenu"> | ||
+ | </html>{{Nav/Resources}}<html> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="navSingleLink"> | ||
+ | <a href="https://igem.org/Contact">CONTACT</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </header> | ||
+ | <html> |
Latest revision as of 20:47, 6 February 2014