Team:Calgary/Sandbox
From 2010.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <html | + | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> |
- | + | ||
- | + | ||
- | + | <!--Color Scheme Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A--> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <style type="text/css"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #nav { | |
- | + | font-family:courier; | |
- | + | font-style:bold; | |
- | + | ||
- | + | width: 750px; height: 230px; | |
- | + | background: url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png); | |
- | + | margin: 10px auto; padding: 0; | |
+ | position: relative; | ||
+ | } | ||
- | + | #nav li { | |
- | + | /*floats main list items*/ | |
- | + | margin: 0; | |
- | + | float: left; | |
- | + | display: block; | |
- | + | margin-bottom: 50px; | |
- | + | padding: 0; list-style: none; | |
- | + | position: absolute; top: 0; | |
- | + | ||
- | + | border: 1px dashed black; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | + | #nav li.off, #nav li.on { | |
- | + | margin: 0; padding: 0; list-style: none; | |
- | + | position: absolute; top: 0; | |
- | + | height: 230px; display: block; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | + | #nav a { | |
- | + | height: 230px; | |
- | + | display: block; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #homepanel{left: 0; width: 78px;} | |
- | + | #teampanel{left: 79px; width: 80px;} | |
- | + | #projectpanel{left: 159px; width: 106px;} | |
- | + | #notebookpanel{left: 266px; width: 212px;} | |
+ | #communitypanel{left: 478px; width: 135px;} | ||
+ | #sponsorspanel{left: 613px; 153px;} | ||
- | |||
- | |||
- | |||
- | |||
- | + | #nav li.off ul, #nav li.on ul { | |
- | + | /*put the subnavs underneath main navs and hide them*/ | |
- | + | display: none; | |
- | + | position: absolute; | |
+ | top: 69px; | ||
+ | height: 15px; | ||
+ | left: 0; | ||
+ | padding-top: 10px; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | /* | + | #nav li a { |
+ | /*affects all links on the list*/ | ||
+ | color: #f90 | ||
+ | font-weight: bold; | ||
+ | display: block; | ||
+ | height: 15px; | ||
+ | width: auto; | ||
+ | padding: 5px; | ||
+ | border: solid 1px #4AC6F7; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | # | + | #nav li.on a { |
- | + | /*change border colour for active area*/ | |
- | } | + | border: 1px solid #9ECF3E; |
+ | } | ||
- | |||
- | |||
- | |||
- | # | + | #nav li.on ul a, #nav li.off ul a { |
- | + | float: left; | |
- | } | + | /*cancel inheritance of border on subnav of active area*/ |
+ | border: 0; | ||
+ | color: #FF0000; | ||
+ | width: auto; | ||
+ | padding-right: 15px; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | /*active | + | #nav li.on ul { |
+ | /*display active subnav list*/ | ||
+ | display: block; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | /* | + | #nav li.off:hover ul { |
+ | /*displays other topics when the main menu item is hovered over*/ | ||
+ | display: block; | ||
+ | z-index: 10; | ||
+ | |||
+ | } | ||
- | |||
- | |||
- | |||
- | # | + | #nav li.off a:hover, #nav li.off:hover a { |
- | + | background: #4AC6F7; | |
- | } | + | color: #30251A; |
+ | } | ||
+ | |||
- | |||
- | |||
- | |||
- | + | </style> | |
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <body> | ||
+ | <ul id="nav"> | ||
+ | <li class="off" id="homepanel"><a href="#">Home</a> | ||
+ | <ul> | ||
+ | <li><a href="#">News</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="off" id="teampanel"><a href="#">Team</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Undergraduates</a></li> | ||
+ | <li><a href="#">Advisors</a></li> | ||
+ | <li><a href="#">About the University</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
- | < | + | <li class="on" id="projectpanel"><a href="#">Project</a> |
- | < | + | <ul> |
- | + | <li><a href="#">Project Overview</a></li> | |
+ | <li><a href="#">Gene Error Detection</a></li> | ||
+ | <li><a href="#">Yeast Assembler</a></li> | ||
+ | <li><a href="#">Modelling</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
- | + | <li class="off" id="notebookpanel"><a href="#">Notebook and Parts</a> | |
- | + | <ul> | |
- | + | <li><a href="#">Notebook</a></li> | |
- | + | <li><a href="#">Parts Submitted</a></li> | |
- | + | <li><a href="#">Characterization</a></li> | |
- | + | <li><a href="#">Protocols and Safety</a></li> | |
+ | </ul> | ||
+ | </li> | ||
- | + | <li class="off" id="communitypanel"><a href="#">Community</a> | |
- | + | <ul> | |
- | + | <li><a href="#">Ethics</a></li> | |
- | + | <li><a href="#">Outreach</a></li> | |
- | + | <li><a href="#">Gallery</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li class="off" id="sponsorspanel"><a href="#">Sponsors</a></li> | |
- | + | </ul> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | </body> | |
- | + | ||
- | </ | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> |
Revision as of 19:34, 9 June 2010