User:Vinoo/2014Design6
From 2014.igem.org
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
<head> | <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: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | ||
+ | } | ||
- | + | .navLinks { /*-- clears style for nav bar ul --*/ | |
+ | margin: 0px; | ||
+ | height: 100%; | ||
+ | } | ||
- | + | .navLinks li { /*-- styles nav bar li, the nav bar elements --*/ | |
- | + | display: inline-block; | |
- | + | float: left; | |
- | + | font-size: 12px; | |
- | + | height: 49px; | |
- | height: | + | padding: 0px; |
- | + | margin: 0px; | |
- | + | border: 1px solid transparent; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .navLinks li:hover { | |
- | + | background-color: #fff; | |
- | + | border: 1px solid #ccc; | |
- | + | border-bottom: 1px solid #fff; | |
- | + | ||
- | border | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #navSingleLink:hover { | |
- | + | border-bottom: 1px solid #ccc; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .navLinks li a { /*-- styles the links within the nav bar li --*/ | |
- | + | text-decoration: none; | |
- | + | line-height: 50px; | |
- | + | ||
color: #000; | color: #000; | ||
- | + | padding-left: 30px; | |
- | + | padding-right: 30px; | |
- | + | display: block; | |
- | + | height: 100%; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | .morelink {display:inline-block; padding: 0px; margin: 0px; height: auto; width: auto; line-height: auto;} |
+ | |||
+ | .navlinks li a:hover { | ||
+ | color: #fff; | ||
+ | |||
+ | } | ||
+ | .navDropMenu { /*-- the drop down box --*/ | ||
width: 100%; | width: 100%; | ||
- | top: | + | position: absolute; |
- | + | top: 50px; | |
- | + | left: 0px; | |
- | color: | + | display: none; |
- | border-bottom: | + | background-color: #fff; |
- | + | border-bottom: 1px solid #ccc; | |
+ | z-index: -100; | ||
+ | padding: 20px 0px; | ||
+ | border: 1px solid #ccc; | ||
} | } | ||
- | + | ||
- | + | .navDropMenu li { /*-- the drop down box --*/ | |
- | + | display: block; | |
- | + | float: none; | |
- | + | list-style: none; | |
- | + | height: auto; | |
- | + | padding: 3px 6px; | |
margin: 0px; | 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: | + | display: block; |
- | padding: 0px | + | 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; | display: block; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | .menuHeader { border-bottom: 1px solid #ccc; display: block; font-weight: bold;} | |
- | + | ||
</style> | </style> | ||
- | |||
</head> | </head> | ||
- | <header> | + | <div id="top-section-bar"></div> |
- | <nav id=" | + | <header id="topNav"> |
- | < | + | <nav id="navContainer"> |
- | + | <ul class="navLinks"> | |
- | <li | + | <li id="navSingleLink"> |
- | <div class=" | + | <a href="https://2014.igem.org" style="padding: 0px;"><img src="https://static.igem.org/mediawiki/2014/d/d4/Logo2014.png" style="height: 60px; margin-top: -6px;" /></a> |
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">ABOUT</a> | ||
+ | <div class="navDropMenu"> | ||
+ | </html>{{Nav/About}}<html> | ||
</div> | </div> | ||
</li> | </li> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<li> | <li> | ||
- | < | + | <a href="#" class="dropToggle">COMPETITION</a> |
- | + | <div class="navDropMenu"> | |
+ | </html>{{Nav/Competition}}<html> | ||
</div> | </div> | ||
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <a href="#">RESOURCES</a> |
- | </li> | + | <div class="navDropMenu"> |
+ | </html>{{Nav/Resources}}<html> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="navSingleLink"> | ||
+ | <a href="https://igem.org/Contact">CONTACT</a> | ||
+ | </li> | ||
</ul> | </ul> | ||
- | |||
</nav> | </nav> | ||
</header> | </header> | ||
- | + | <html> | |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 16:13, 6 February 2014