Template:MainStyle/Menu
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | <html> | ||
+ | |||
+ | |||
<html> | <html> | ||
- | < | + | <head> |
- | < | + | <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: inline-block; | |
- | + | float: left; | |
+ | font-size: 12px; | ||
+ | height: 49px; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | border: 1px solid transparent; | ||
+ | } | ||
+ | .navLinks li:hover { | ||
+ | background-color: #fff; | ||
+ | border: 1px solid #ccc; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | } | ||
- | + | .navLinks > .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; | ||
+ | padding-left: 30px; | ||
+ | padding-right: 30px; | ||
+ | display: block; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .navlinks li > a:hover { | ||
+ | color: #fff; | ||
+ | |||
+ | } | ||
+ | .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 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; font-family: Georgia, Times, "Times New Roman", serif; } | ||
+ | </style> | ||
+ | |||
+ | <style type="text/css" media="print"> | ||
+ | #topNav { display: none;} | ||
+ | </style> | ||
+ | </head> | ||
+ | <div id="top-section-bar"></div> | ||
+ | <header id="topNav"> | ||
+ | <nav id="navContainer"> | ||
+ | <ul class="navLinks"> | ||
+ | <li class="navSingleLink"> | ||
+ | <a href="https://2014.igem.org" style="padding-left: 10px; padding-right: 10px;"><img src="https://static.igem.org/mediawiki/2014/2/22/Logo2014v2.png" /></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="#">TEAMS</a> | ||
+ | <div class="navDropMenu"> | ||
+ | </html>{{Nav/Teams}}<html> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">RESOURCES</a> | ||
+ | <div class="navDropMenu"> | ||
+ | </html>{{Nav/Resources}}<html> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="navSingleLink"> | ||
+ | <a href="https://igem.org/Contact">CONTACT</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </header> | ||
+ | <html> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> |
Revision as of 18:13, 9 July 2014