User:Vinoo/2014Design6
From 2014.igem.org
< User:Vinoo(Difference between revisions)
m |
m |
||
(48 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%; | width: 100%; | ||
position: fixed; | position: fixed; | ||
- | top: | + | top: 14px; |
- | height: | + | height: 50px; |
- | background-color: # | + | background-color: #f0f0f0; |
border-bottom: 1px solid #ccc; | border-bottom: 1px solid #ccc; | ||
z-index: 1000; | z-index: 1000; | ||
} | } | ||
- | + | ||
- | width: | + | #navContainer { /*-- creates centered container for nav bar --*/ |
- | height: 100%; | + | width: 975px; |
+ | height: 100%; | ||
margin: 0px auto; | 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; |
- | </html> | + | border: 1px solid #ccc; |
+ | } | ||
+ | |||
+ | .navDropMenu a {border: 1px solid #000; display: inline-block; color: red;} | ||
+ | |||
+ | .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