Template:BrownTemp
From 2008.igem.org
(Difference between revisions)
NeilParikh (Talk | contribs) |
NeilParikh (Talk | contribs) |
||
(13 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | <html> | |
- | < | + | <style type="text/css"> |
+ | pre {font-size: 1.2em} | ||
+ | span.keyword {color: #ffffff} | ||
+ | span.comment {color: #ffffff} | ||
+ | span.string {color: #ffffff} | ||
+ | span.untermstring {color: #B20000} | ||
+ | span.syscmd {color: #ffffff} | ||
- | { | + | #menu { |
- | + | height: 195px; | |
- | + | background: url(https://static.igem.org/mediawiki/2008/8/82/Toxipop_background_v3.png) no-repeat center; | |
- | + | } | |
- | + | #menu ul{ | |
- | + | list-style: none; | |
- | + | padding-top: 30px; | |
- | + | } | |
- | + | #menu li{ | |
- | | | + | display: inline; |
+ | padding: 3px; | ||
+ | border: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #menu a { | ||
+ | font-size: 10pt; | ||
+ | font-family: Lucida Grande, Verdana, Arial, Sans-Serif; | ||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | } | ||
+ | #menu a:hover { | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | #nav, #nav ul { | ||
+ | position: relative; | ||
+ | margin: 0 auto; /* purpose: allow centering ul table */ | ||
+ | padding: 0; | ||
+ | display: table /* purpose: ul doesn't stretch width 100% */ | ||
+ | } | ||
+ | |||
+ | #nav li { | ||
+ | display: table-cell; /* purpose: li behaves like table-cell */ | ||
+ | position: relative; /* purpose: non-overlap li elements in ul */ | ||
+ | list-style: none; /* purpose: remove default html list-style */ | ||
+ | } | ||
+ | |||
+ | #nav li a { | ||
+ | display: block; /* purpose: non-overlap div on a */ | ||
+ | margin: 0 1px 0 0; /* purpose: spacing main menu items */ | ||
+ | padding: 2px 12px; | ||
+ | background-color: #000000; | ||
+ | color: #ffffff; | ||
+ | text-align: center; | ||
+ | text-decoration: none; /* purpose: remove underline from a */ | ||
+ | font: bold 13px arial; | ||
+ | } | ||
+ | |||
+ | #nav li a:hover { | ||
+ | background-color: #e9191a; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #nav div { | ||
+ | position: absolute; /* purpose: li of div doesn't spread out */ | ||
+ | display: none; | ||
+ | width: 10em; | ||
+ | opacity: 0.8; | ||
+ | filter: alpha(opacity=80); | ||
+ | border: 1px solid #e9191a; | ||
+ | background: #e9191a; | ||
+ | } | ||
+ | |||
+ | #nav span a, #nav div a { | ||
+ | position: relative; | ||
+ | display: block; /* purpose: a's in div have same width */ | ||
+ | margin: 0; | ||
+ | padding: 5px 10px; | ||
+ | text-align: left; | ||
+ | font: 11px arial; | ||
+ | } | ||
+ | |||
+ | #nav span a:hover, #nav div a:hover { | ||
+ | background-color: #e9191a; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #nav span div { | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | border: none; /* purpose: reset border to none */ | ||
+ | border-top: 1px solid #5970B2; /* purpose: add a seperator */ | ||
+ | border-bottom: 1px solid #5970B2; /* purpose: add a seperator */ | ||
+ | opacity: 1.0; /* purpose: opacity already 0.8 by #nav div */ | ||
+ | filter: alpha(opacity=100); /* purpose: opacity already 80 by #nav div */ | ||
+ | } | ||
+ | |||
+ | #nav span div a { | ||
+ | text-indent: 10px; | ||
+ | } | ||
+ | |||
+ | #nav span div span div a { | ||
+ | text-indent: 20px; | ||
+ | } | ||
+ | |||
+ | #nav .expand { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 95% 50%; | ||
+ | } | ||
+ | |||
+ | #nav .collapse { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 95% 50%; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <script type="text/javascript" src="http://student.kuleuven.be/~s0173901/scripts/jquery.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | function ddmsie() { | ||
+ | $("#nav ul").css('display', 'inline-block'); | ||
+ | $("#nav li").css('display', 'inline'); | ||
+ | $("#nav a").css('display', 'inline-block'); | ||
+ | $("#nav a").hover(function () {$(this).css('background-color', '#d4e2ef')}, | ||
+ | function () {$(this).css('background-color', '#649cd7')}); | ||
+ | $("#nav div a").css('display', 'block'); | ||
+ | $("#nav div").css('left', '0'); | ||
+ | $("#nav div").css('top', '150%'); | ||
+ | $("#nav span div").css('top', '0'); | ||
+ | } | ||
+ | |||
+ | function ddmozilla() { | ||
+ | |||
+ | } | ||
+ | |||
+ | function ddnav() { | ||
+ | $("#nav li").hover( | ||
+ | function () { | ||
+ | $(this).find("div:first").css('display', 'inline');}, | ||
+ | function () { | ||
+ | $(this).find("div:first").css('display', 'none');} | ||
+ | ); | ||
+ | |||
+ | $("#nav span > a").toggle( | ||
+ | function () { | ||
+ | $(this).removeClass("#nav expand").addClass("#nav collapse"); | ||
+ | $(this).css('background-color', '#99AAFF'); | ||
+ | $(this).parent().find("div:first").css('display', 'block');}, | ||
+ | function () { | ||
+ | $(this).removeClass("#nav collapse").addClass("#nav expand"); | ||
+ | $(this).hover( | ||
+ | function () { | ||
+ | $(this).css('background-color', '#d4e2ef');}, | ||
+ | function () { | ||
+ | $(this).css('background-color', '#649cd7');} | ||
+ | ); | ||
+ | $(this).parent().find("div:first").css('display', 'none'); | ||
+ | } | ||
+ | ).addClass("#nav expand"); | ||
+ | } | ||
+ | |||
+ | $(function () { | ||
+ | if(jQuery.browser.msie) ddmsie(); | ||
+ | if(jQuery.browser.mozilla) ddmozilla(); | ||
+ | ddnav(); | ||
+ | }); | ||
+ | </script> | ||
+ | <div align="center" id="menu"></div><br /> | ||
+ | <div align="center" id="nav"> | ||
+ | <ul> | ||
+ | |||
+ | <li><a href="https://2008.igem.org/Team:Brown">Home</a></li> | ||
+ | |||
+ | <li><a href="https://2008.igem.org/Team:Brown/Team/About">Team</a> | ||
+ | <div> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Team/About">About Us</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Team/Students">Students</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Team/Advisers">Advisors</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2008.igem.org/Team:Brown/Project/Background">The Project</a> | ||
+ | <div> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Project/Background">Background</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Project/Overview">Overview and Applications</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Project/Strategy">System Components</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Project/Testing">Testing</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Project/Analysis">Data and Analysis</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2008.igem.org/Team:Brown/Parts">Our Parts</a> | ||
+ | <div> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Parts">Submitted</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Parts/In Progress">In Progress</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2008.igem.org/Team:Brown/Notebook">Lab Notebook</a> | ||
+ | <div> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Notebook">Notebook Calendar</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Notebook/Timeline">Timeline</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Notebook/Protocols">Protocols</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | |||
+ | <li><a>Links</a> | ||
+ | <div> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Links/Sponsors">Team Sponsors</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Links/SpecThanks">Special Thanks</a> | ||
+ | <a href="https://2008.igem.org/Team:Brown/Links/References">References</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </html> | ||
+ | |||
+ | <br/> | ||
+ | {|cellspacing="5" cellpadding="10" style="background:#000000; width: 965px;" | ||
+ | |-valign="top" | ||
+ | |style="background:#ffffff"| |
Latest revision as of 22:34, 29 October 2008