Template:Peking2012 Color Data
From 2012.igem.org
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | < | + | <style type="text/css"> |
- | + | ||
- | + | /* | |
- | + | * Peking 2012 Header | |
- | -- | + | * Copyleft (C) Sun Sibai <sun.niasw@gmail.com> |
- | + | * this = /Template:Peking2012_Color_Prologue | |
- | + | */ | |
- | + | ||
- | + | body /* UltraGlobal Environment (origin item) */ | |
- | + | { | |
- | + | background-color: #020f40; | |
- | + | } | |
- | </ | + | #blank , |
- | + | #blank * | |
- | + | { | |
- | + | background-color: transparent; | |
- | + | background-image: url(""); | |
- | + | border-style: none; | |
- | </ | + | margin: 0 auto; |
- | + | padding: 0; | |
+ | } | ||
+ | |||
+ | #globalWrapper /* Global Environment (origin item) */ | ||
+ | { | ||
+ | background-color: #021c35; | ||
+ | background-attachment: fixed; | ||
+ | background-position: 50% 0; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url("/wiki/images/5/50/Peking2012_Color_Background.jpg"); | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /* Remove Top Item (origin item) */ | ||
+ | #top-section | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | #top | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | h1.firstHeading | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* Inner Environment (origin item) */ | ||
+ | #content | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-image: url(""); | ||
+ | background-attachment: scroll; | ||
+ | background-position: 50% 0; | ||
+ | background-repeat: repeat-y; | ||
+ | overflow: hidden; | ||
+ | border-style: none; | ||
+ | } | ||
+ | #bodyContent | ||
+ | { | ||
+ | z-index: 0; | ||
+ | } | ||
+ | #footer-box | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-image: none; | ||
+ | border-style: none; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | #catlinks | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | #content a, | ||
+ | #content a:hover | ||
+ | { | ||
+ | color: #fff350; | ||
+ | display: inline; | ||
+ | } | ||
+ | #content a:link, | ||
+ | #content a:visited, | ||
+ | #content a:hover, | ||
+ | #content a:active | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* Bottom Environment (origin item) */ | ||
+ | #footer-box a, | ||
+ | #footer-box a:hover | ||
+ | { | ||
+ | color: #e8e7b9; | ||
+ | text-decoration: none; | ||
+ | display: inline; | ||
+ | } | ||
+ | ul,li | ||
+ | { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style-image: none; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | table | ||
+ | { | ||
+ | border-collapse:collapse; | ||
+ | background-color: transparent; | ||
+ | color: #ffffff; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | h3 | ||
+ | { | ||
+ | padding: 20px 30px 10px; | ||
+ | } | ||
+ | |||
+ | p | ||
+ | { | ||
+ | font-family: Arial, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Common Environment */ | ||
+ | .center | ||
+ | { | ||
+ | text-align: center; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | .floatL | ||
+ | { | ||
+ | float: left; | ||
+ | clear: left; | ||
+ | } | ||
+ | .floatR | ||
+ | { | ||
+ | float: right; | ||
+ | clear: right; | ||
+ | } | ||
+ | .floatC | ||
+ | { | ||
+ | text-align: center; | ||
+ | margin: 0 auto; | ||
+ | float: none; | ||
+ | clear: both; | ||
+ | } | ||
+ | .blank | ||
+ | { | ||
+ | filter: Alpha(Opacity=0%); | ||
+ | -moz-opacity: 0; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .hidden | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | .show | ||
+ | { | ||
+ | display: block; | ||
+ | } | ||
+ | .show-text | ||
+ | { | ||
+ | display: inline; | ||
+ | } | ||
+ | .button img | ||
+ | { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* Special Construction */ | ||
+ | |||
+ | /***--- Top MenuBar ---***/ | ||
+ | #PKU_menubar | ||
+ | { | ||
+ | background-attachment: fixed; | ||
+ | background-repeat: repeat-x; | ||
+ | background-image: url("/wiki/images/8/8b/Peking2012_Color_Topbar.png"); | ||
+ | background-color: #020033; | ||
+ | overflow: hidden; | ||
+ | position: fixed; | ||
+ | padding: 0; | ||
+ | margin: 0 auto; | ||
+ | top: 0; | ||
+ | width: 965px; | ||
+ | height: 20px; | ||
+ | font-family: Arial, sans-serif; | ||
+ | font-size: 15px; | ||
+ | font-weight: bold; | ||
+ | line-height: 20px; | ||
+ | z-index: 100; | ||
+ | opacity: 0.8; | ||
+ | } | ||
+ | #PKU_menubar * | ||
+ | { | ||
+ | font-family: Arial, sans-serif; | ||
+ | font-size: 15px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #PKU_menubar a:link, | ||
+ | #PKU_menubar a:visited | ||
+ | { | ||
+ | color: #e8e7b9; | ||
+ | } | ||
+ | #PKU_menubar a:hover | ||
+ | { | ||
+ | color: #f9f8ca; | ||
+ | } | ||
+ | #PKU_menubar a:active | ||
+ | { | ||
+ | color: #ffee66; | ||
+ | } | ||
+ | .PKU_menubar_left | ||
+ | { | ||
+ | float: left; | ||
+ | clear: none; | ||
+ | padding: 0 30px 0 5px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .PKU_menubar_right | ||
+ | { | ||
+ | float: right; | ||
+ | clear: none; | ||
+ | padding: 0 5px 0 30px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | #PKU_menubar li | ||
+ | { | ||
+ | display: inline; | ||
+ | } | ||
+ | |||
+ | /***--- Top Banner ---***/ | ||
+ | #PKU_banner_container | ||
+ | { | ||
+ | padding: 0; | ||
+ | margin: 0 auto; | ||
+ | text-align: center; | ||
+ | z-index: 1; | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | } | ||
+ | #PKU_banner_image | ||
+ | { | ||
+ | width: 394px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | #PKU_banner_logo | ||
+ | { | ||
+ | width: 244px; | ||
+ | height: 60px; | ||
+ | text-align: center; | ||
+ | color: #ffffff; | ||
+ | font-family: Georgia, serif; | ||
+ | font-size: 15px; | ||
+ | font-variant: small-caps; | ||
+ | letter-spacing: 2px; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | #PKU_banner_menu | ||
+ | { | ||
+ | width: 550px; | ||
+ | height: 30px; | ||
+ | } | ||
+ | #PKU_banner_menu , | ||
+ | #PKU_banner_submenu | ||
+ | { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | text-align: center; | ||
+ | font-size: 15px; | ||
+ | font-family: Georgia, serif; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #PKU_banner_menu a , | ||
+ | #PKU_banner_menu a:link , | ||
+ | #PKU_banner_menu a:visited | ||
+ | { | ||
+ | color: #e3e3e3; | ||
+ | font-size: 15px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #PKU_banner_menu a:hover , | ||
+ | #PKU_banner_menu a:active | ||
+ | { | ||
+ | color: #ffffff; | ||
+ | font-size: 17px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #PKU_banner_submenu > li, | ||
+ | #PKU_banner_submenu > li ul | ||
+ | { | ||
+ | height: 130px; | ||
+ | overflow: hidden; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #PKU_banner_menu > li | ||
+ | { | ||
+ | height: 30px; | ||
+ | } | ||
+ | #PKU_banner_submenu > li ul > li | ||
+ | { | ||
+ | height: 25px; | ||
+ | width: 100%; | ||
+ | background-color: #3570ff; | ||
+ | opacity: 0.85; | ||
+ | } | ||
+ | #PKU_banner_submenu > li ul > li:hover | ||
+ | { | ||
+ | background-color: #80aaff; | ||
+ | opacity: 1.0; | ||
+ | } | ||
+ | #PKU_banner_submenu > li ul > li a , | ||
+ | #PKU_banner_submenu > li ul > li a:link , | ||
+ | #PKU_banner_submenu > li ul > li a:visited | ||
+ | { | ||
+ | color: #f0f0f0; | ||
+ | text-decoration: none; | ||
+ | padding-top: 2px; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | #PKU_banner_submenu > li ul > li a:hover , | ||
+ | #PKU_banner_submenu > li ul > li a:active | ||
+ | { | ||
+ | color: #ffffcc; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /***--- Block Style ---***/ | ||
+ | #text-body | ||
+ | { | ||
+ | position: relative; | ||
+ | top: -90px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | #text-body #PKU_subsubmenu | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | #text-body #PKU_subsubmenu a, | ||
+ | #text-body #PKU_subsubmenu a:link, | ||
+ | #text-body #PKU_subsubmenu a:visited | ||
+ | { | ||
+ | color: #eeeeee; | ||
+ | } | ||
+ | #text-body #PKU_subsubmenu a:hover, | ||
+ | #text-body #PKU_subsubmenu a:active | ||
+ | { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #text-body ul#PKU_subsubmenu > li | ||
+ | { | ||
+ | width: 184px; | ||
+ | overflow: hidden; | ||
+ | line-height: 20px; | ||
+ | vertical-align: middle; | ||
+ | padding: 13px 18px; | ||
+ | text-align: left; | ||
+ | font-family: Eras Medium ITC, Verdana, sans-serif; | ||
+ | } | ||
+ | #text-body ul#PKU_subsubmenu > li.trunk | ||
+ | { | ||
+ | margin-top: 20px; | ||
+ | font-size: 18px; | ||
+ | background-position: 50% 50%; | ||
+ | } | ||
+ | #text-body ul#PKU_subsubmenu > li:first-child | ||
+ | { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | #text-body ul#PKU_subsubmenu > li.branch | ||
+ | { | ||
+ | padding: 7px 17px; | ||
+ | margin: 0; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: #70a0ff; | ||
+ | font-size: 14px; | ||
+ | height: 0; | ||
+ | } | ||
+ | #text-body ul#PKU_subsubmenu > li.branch li | ||
+ | { | ||
+ | line-height: 30px; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | #text-body .PKU_context | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | color: #ffffff; | ||
+ | padding: 25px; | ||
+ | margin: 20px 0; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: #70a0ff; | ||
+ | text-align: center; | ||
+ | font-family: Arial, sans-serif; | ||
+ | } | ||
+ | #text-body .PKU_context.first | ||
+ | { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | #text-body .PKU_context * | ||
+ | { | ||
+ | margin: 0; | ||
+ | } | ||
+ | #text-body .PKU_context table | ||
+ | { | ||
+ | margin: 0 auto; | ||
+ | width: 560px; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | #text-body .PKU_context table td | ||
+ | { | ||
+ | border-style: solid; | ||
+ | border-color: #ffffff; | ||
+ | border-width: 1px; | ||
+ | } | ||
+ | #text-body .PKU_context p | ||
+ | { | ||
+ | font-size: 16px; | ||
+ | padding: 10px; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | #text-body .PKU_context h3 | ||
+ | { | ||
+ | text-align: left; | ||
+ | color: #70d0ff; | ||
+ | font-size: 30px; | ||
+ | padding: 10px; | ||
+ | line-height: 28px; | ||
+ | } | ||
+ | #text-body .PKU_context ul, | ||
+ | #text-body .PKU_context li | ||
+ | { | ||
+ | text-align: justify; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | #text-body .PKU_context ul.refer li | ||
+ | { | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | #text-body .PKU_context ul | ||
+ | { | ||
+ | padding-left: 20px; | ||
+ | width: 570px; | ||
+ | } | ||
+ | #text-body .PKU_context.floatC p | ||
+ | { | ||
+ | width: 887px; | ||
+ | } | ||
+ | #text-body .PKU_context.floatR p | ||
+ | { | ||
+ | width: 655px; | ||
+ | } | ||
+ | #text-body .PKU_context.floatR p.description | ||
+ | { | ||
+ | font-style: italic; | ||
+ | font-size: 14px; | ||
+ | margin: 0 auto; | ||
+ | padding: 10px 10px; | ||
+ | text-align: justify; | ||
+ | width: 550px; | ||
+ | } | ||
+ | #text-body .PKU_context img , | ||
+ | #text-body .PKU_context object | ||
+ | { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | ul.horizontal > li | ||
+ | { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | clear: none; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | ul.vertical > li | ||
+ | { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | clear: both; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <ul id="PKU_menubar" class="noprint"> | ||
+ | <li class="PKU_menubar_left" > | ||
+ | <a href="/Main_Page" title="iGEM Home Page"><img src="/wiki/images/2/27/Peking2012_iGEM18.png" alt="iGEM Home" /></a> | ||
+ | <a href="/Main_Page" title="iGEM Home Page" >iGEM</a> | ||
</li> | </li> | ||
- | + | <li class="PKU_menubar_left" > | |
- | </div> | + | <a href="#" title="View Page Source"><img src="/wiki/images/7/7e/Peking2012_ViewSource18.png" alt="View source" /></a> |
- | <script type="text/javascript"> | + | <a href="#" title="View Page Source" >View source</a> |
+ | </li> | ||
+ | <li class="PKU_menubar_left" > | ||
+ | <a href="#" title="Watch this Page"><img src="/wiki/images/3/31/Peking2012_Watch18.png" alt="Watch" /></a> | ||
+ | <a href="#" title="Watch this Page" >Watch</a> | ||
+ | </li> | ||
+ | <li class="PKU_menubar_left" > | ||
+ | <a href="#" title="Cancel Watching State"><img src="/wiki/images/d/d5/Peking2012_Unwatch18.png" alt="Unwatch" /></a> | ||
+ | <a href="#" title="Cancel Watching State" >Unwatch</a> | ||
+ | </li> | ||
+ | <li class="PKU_menubar_left" > | ||
+ | <a href="#" title="View Page History"><img src="/wiki/images/b/bc/Peking2012_History18.png" alt="History" /></a> | ||
+ | <a href="#" title="View Page History" >History</a> | ||
+ | </li> | ||
+ | <li class="PKU_menubar_right" > | ||
+ | <a href="#" title="Bye!"><img src="/wiki/images/1/10/Peking2012_LogOut18.png" alt="Log out" /></a> | ||
+ | <a href="#" title="Bye!" >Log out</a> | ||
+ | </li> | ||
+ | <li class="PKU_menubar_right" > | ||
+ | <a href="#" title="Hello!"><img src="/wiki/images/a/a8/Peking2012_LogIn18.png" alt="Log in" /></a> | ||
+ | <a href="#" title="Hello!" >Log in</a> | ||
+ | </li> | ||
+ | <li class="PKU_menubar_right" > | ||
+ | <a href="https://igem.org/User_Information" title="My Profile"><img src="/wiki/images/6/64/Peking2012_Account18.png" alt="Account" /></a> | ||
+ | <a href="https://igem.org/User_Information" title="My Profile" >Account</a> | ||
+ | </li> | ||
+ | <li class="PKU_menubar_right" > | ||
+ | <a href="#" title="My Page"><img src="/wiki/images/0/0e/Peking2012_User18.png" alt="User" /></a> | ||
+ | <a href="#" title="My Page" ></a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | <!--<div id="blank"><pre style="width:100%;height:20px;"> </pre></div>--> | ||
+ | |||
+ | <script type="text/javascript" > | ||
/* | /* | ||
- | * Peking 2012 | + | * Peking 2012 TopBar |
* by Sun Sibai | * by Sun Sibai | ||
+ | * E-mail: sun.niasw@gmail.com | ||
*/ | */ | ||
- | var | + | var thispage = document.location.toString().slice("https://2012.igem.org/".length); /* relative location */ |
- | var | + | var pkutopbar = document.getElementById('PKU_menubar'); |
- | + | var pkutopli = pkutopbar.getElementsByTagName('li'); | |
+ | var pkutopa = pkutopbar.getElementsByTagName('a'); | ||
+ | pkutopa[3].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit'; | ||
+ | pkutopa[5].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=watch'; | ||
+ | pkutopa[7].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=unwatch'; | ||
+ | pkutopa[9].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=history'; | ||
+ | pkutopa[11].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogout' + '&'.substring(0,1) + 'returnto=' + thispage; | ||
+ | pkutopa[13].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogin' + '&'.substring(0,1) + 'returnto=' + thispage; | ||
+ | pkutopa[2].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit'; | ||
+ | pkutopa[4].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=watch'; | ||
+ | pkutopa[6].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=unwatch'; | ||
+ | pkutopa[8].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=history'; | ||
+ | pkutopa[10].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogout' + '&'.substring(0,1) + 'returnto=' + thispage; | ||
+ | pkutopa[12].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogin' + '&'.substring(0,1) + 'returnto=' + thispage; | ||
+ | |||
+ | var userbar = document.getElementById('pt-userpage'); | ||
+ | var username; | ||
+ | var userstr; | ||
+ | |||
+ | if (userbar!=null) | ||
{ | { | ||
- | + | userstr = userbar.innerHTML; | |
- | if ( | + | username = userstr.substring(userstr.lastIndexOf('<'),userstr.indexOf('>')+1); |
- | + | pkutopa[17].innerHTML = username; | |
+ | pkutopa[17].href = 'https://2012.igem.org/User:' + username; | ||
+ | pkutopa[16].href = 'https://2012.igem.org/User:' + username; | ||
+ | pkutopli[8].style.display='inline'; | ||
+ | pkutopli[7].style.display='inline'; | ||
+ | pkutopli[5].style.display='inline'; | ||
+ | pkutopli[6].style.display='none'; | ||
+ | userstr = document.getElementById('menubar').innerHTML; | ||
+ | if (userstr.search('unwatch')!=-1) | ||
+ | { | ||
+ | pkutopli[2].style.display='none'; | ||
+ | pkutopli[3].style.display='inline'; | ||
+ | } | ||
+ | else if (userstr.search('watch')!=-1) | ||
+ | { | ||
+ | pkutopli[2].style.display='inline'; | ||
+ | pkutopli[3].style.display='none'; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | pkutopli[2].style.display='none'; | ||
+ | pkutopli[3].style.display='none'; | ||
+ | } | ||
} | } | ||
- | + | else | |
- | </ | + | { |
+ | pkutopli[8].style.display='none'; | ||
+ | pkutopli[7].style.display='none'; | ||
+ | pkutopli[5].style.display='none'; | ||
+ | pkutopli[6].style.display='inline'; | ||
+ | pkutopli[2].style.display='none'; | ||
+ | pkutopli[3].style.display='none'; | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | <div class="floatC"><p class="blank" style="height:20px;"> </p></div> | ||
+ | <div id="PKU_banner_container"> | ||
+ | <div class="floatL"> | ||
+ | <img id="PKU_banner_image" src="/wiki/images/f/f0/Peking2012_Color_Banner.png" alt="Programming Cells though Light" /> | ||
+ | </div> | ||
+ | <div class="floatR"> | ||
+ | <p id="PKU_banner_logo"><img style="width:50px;margin-right:15px;" src="/wiki/images/8/85/Peking2012_Color_Logo_128.png" alt="" />Peking University</p> | ||
+ | </div> | ||
+ | <div class="floatR"> | ||
+ | <ul id="PKU_banner_menu" class="button horizontal"> | ||
+ | <li style="width:60px;"> | ||
+ | <a onmouseover="TriggerSubmenu(0);" href="/Team:Peking"> | ||
+ | Home | ||
+ | </a> | ||
+ | </li> | ||
+ | <li style="width:60px;"> | ||
+ | <a onmouseover="TriggerSubmenu(1);" onmouseout="TriggerSubmenu(0);"> | ||
+ | Team | ||
+ | </a> | ||
+ | </li> | ||
+ | <li style="width:70px;"> | ||
+ | <a onmouseover="TriggerSubmenu(2);" onmouseout="TriggerSubmenu(0);"> | ||
+ | Project | ||
+ | </a> | ||
+ | </li> | ||
+ | <li style="width:85px;"> | ||
+ | <a onmouseover="TriggerSubmenu(3);" onmouseout="TriggerSubmenu(0);"> | ||
+ | Data Page | ||
+ | </a> | ||
+ | </li> | ||
+ | <li style="width:80px;"> | ||
+ | <a onmouseover="TriggerSubmenu(4);" onmouseout="TriggerSubmenu(0);"> | ||
+ | Modeling | ||
+ | </a> | ||
+ | </li> | ||
+ | <li style="width:130px;"> | ||
+ | <a onmouseover="TriggerSubmenu(5);" onmouseout="TriggerSubmenu(0);"> | ||
+ | Human Practice | ||
+ | </a> | ||
+ | </li> | ||
+ | <li style="width:65px;"> | ||
+ | <a onmouseover="TriggerSubmenu(0);" href="/Team:Peking/Safety"> | ||
+ | Safety | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="floatC"> | ||
+ | <ul id="PKU_banner_submenu" class="button horizontal"> | ||
+ | <li class="blank"> | ||
+ |   | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul onmouseover="TriggerSubmenu(1);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:120px;display:block;"> | ||
+ | <li class="submenu_team"> | ||
+ | <a href="/Team:Peking/Team"> | ||
+ | Gallery | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_team"> | ||
+ | <a href="/Team:Peking/Team/Members"> | ||
+ | Members | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_team"> | ||
+ | <a href="/Team:Peking/Team/Attribution"> | ||
+ | Attribution | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_team"> | ||
+ | <a href="/Team:Peking/Team/Diary"> | ||
+ | Diary | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul onmouseover="TriggerSubmenu(2);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:200px;display:block;"> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/Project"> | ||
+ | Overview | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/Project/Luminesensor"> | ||
+ | Luminesensor | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/Project/Communication"> | ||
+ | Light Communication | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/Project/3D"> | ||
+ | Synbio in 2D & 3D | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/Project/Phototaxis"> | ||
+ | Phototaxis | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul onmouseover="TriggerSubmenu(3);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:170px;display:block;"> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/DataPage"> | ||
+ | Data | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_project"> | ||
+ | <a href="/Team:Peking/DataPage/Judging"> | ||
+ | Judging Criteria | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul onmouseover="TriggerSubmenu(4);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:250px;display:block;"> | ||
+ | <li class="submenu_modeling"> | ||
+ | <a href="/Team:Peking/Modeling/Luminesensor"> | ||
+ | Luminesensor Optimization | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_modeling"> | ||
+ | <a href="/Team:Peking/Modeling/Phototaxis"> | ||
+ | Phototaxis Simulation | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_modeling"> | ||
+ | <a href="/Team:Peking/Modeling/Appendix/ODE"> | ||
+ | Appendix | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul onmouseover="TriggerSubmenu(5);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:320px;display:block;"> | ||
+ | <li class="submenu_humanpractice"> | ||
+ | <a href="/Team:Peking/HumanPractice/Sowing"> | ||
+ | Sowing Tomorrow's Synthetic Biologists | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_humanpractice"> | ||
+ | <a href="/Team:Peking/HumanPractice/Review"> | ||
+ | Historic iGEM Projects Review | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="submenu_humanpractice"> | ||
+ | <a href="/Team:Peking/HumanPractice/Outreach/Visiting"> | ||
+ | Outreach & Workshop | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script type="text/javascript" > | ||
/* | /* | ||
- | * Peking 2012 | + | * Peking 2012 MenuBar |
* by Sun Sibai | * by Sun Sibai | ||
+ | * E-mail: sun.niasw@gmail.com | ||
*/ | */ | ||
- | var | + | |
- | var | + | var Submenu_Size_Cur = [130, 0, 0, 0, 0, 0]; |
- | var | + | var Submenu_Item_Num = 5; |
- | var | + | var Submenu_Item_Des = 0; |
- | var | + | var Submenu_Item_Cur = 0; |
- | var | + | var Submenu_BlankWidth = [0, 445, 470, 562, 608, 640]; //Unit: Pixel |
- | var | + | var Submenu_ListHeight = [130, 100, 125, 50, 75, 75]; //Unit: Pixel |
- | var | + | var Submenu_Handle_State = 0; //0:Null, 1:Growth, 2:Waiting, 3:Wither |
- | var | + | var Submenu_Handle = null; |
- | for (var it=0;it< | + | var Submenu_Parent = document.getElementById('PKU_banner_container'); |
+ | var Submenu = document.getElementById('PKU_banner_submenu'); | ||
+ | var Submenu_Obj = Submenu.getElementsByTagName('ul'); | ||
+ | var Submenu_Blank = Submenu.getElementsByTagName('li')[0]; | ||
+ | for (var it=0;it<Submenu_Item_Num;++it) | ||
{ | { | ||
- | + | Submenu_Obj[it].style.height=Submenu_Size_Cur[it+1]+'px'; | |
- | + | Submenu_Obj[it].style.display='none'; | |
} | } | ||
+ | |||
/* Automatic Function */ | /* Automatic Function */ | ||
- | function | + | function ItemGrowth() |
{ | { | ||
- | + | Submenu_Size_Cur[Submenu_Item_Cur] = Submenu_Size_Cur[Submenu_Item_Cur] * 0.6 + Submenu_ListHeight[Submenu_Item_Cur] * 1.2 * 0.4; | |
- | if ( | + | if (Submenu_Size_Cur[Submenu_Item_Cur]>=Submenu_ListHeight[Submenu_Item_Cur]) |
{ | { | ||
- | + | Submenu_Size_Cur[Submenu_Item_Cur]=Submenu_ListHeight[Submenu_Item_Cur]; | |
- | + | Submenu_Handle_State = 0; | |
+ | Submenu_Handle = null; | ||
} | } | ||
else | else | ||
{ | { | ||
- | + | Submenu_Handle = setTimeout(ItemGrowth,50); | |
} | } | ||
- | + | Submenu_Obj[Submenu_Item_Cur-1].style.height=Submenu_Size_Cur[Submenu_Item_Cur]+'px'; | |
} | } | ||
- | function | + | function ItemWither() |
{ | { | ||
- | + | Submenu_Size_Cur[Submenu_Item_Cur] = Submenu_Size_Cur[Submenu_Item_Cur] * 0.6 - 5 * 0.4; | |
- | + | if (Submenu_Size_Cur[Submenu_Item_Cur]<=0) | |
- | + | ||
- | + | ||
- | + | ||
- | if ( | + | |
{ | { | ||
- | + | Submenu_Size_Cur[Submenu_Item_Cur]=0; | |
- | + | Submenu_Obj[Submenu_Item_Cur-1].style.display='none'; | |
- | + | Submenu_Obj[Submenu_Item_Cur-1].style.height=0; | |
+ | Submenu_Item_Cur = Submenu_Item_Des; | ||
+ | Submenu_Blank.style.width=Submenu_BlankWidth[Submenu_Item_Cur]+'px'; | ||
+ | if (Submenu_Item_Des!=0) | ||
+ | { | ||
+ | if (Submenu_Handle) {clearTimeout(Submenu_Handle);Submenu_Handle = null;} | ||
+ | Submenu_Obj[Submenu_Item_Cur-1].style.display='block'; | ||
+ | Submenu_Handle_State = 1; | ||
+ | ItemGrowth(); | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | Submenu_Handle_State = 0; | ||
+ | Submenu_Handle = null; | ||
+ | Submenu_Parent.style.zIndex = 0; | ||
+ | } | ||
} | } | ||
else | else | ||
{ | { | ||
- | + | Submenu_Obj[Submenu_Item_Cur-1].style.height=Submenu_Size_Cur[Submenu_Item_Cur]+'px'; | |
+ | Submenu_Handle = setTimeout(ItemWither,50); | ||
} | } | ||
- | |||
} | } | ||
- | function | + | function ToWither() |
{ | { | ||
- | + | Submenu_Handle_State = 3; | |
- | + | ItemWither(); | |
} | } | ||
/* Trigger Function */ | /* Trigger Function */ | ||
- | function | + | function TriggerSubmenu(i) |
{ | { | ||
- | if ( | + | if (Submenu_Handle_State==0) |
- | + | ||
{ | { | ||
- | if ( | + | if (Submenu_Item_Des==0) |
- | if ( | + | { |
- | if ( | + | if (i!=0) |
- | + | { | |
- | + | Submenu_Parent.style.zIndex = 5; | |
- | + | Submenu_Item_Des = i; | |
+ | Submenu_Item_Cur = i; | ||
+ | Submenu_Handle_State = 1; | ||
+ | Submenu_Blank.style.width=Submenu_BlankWidth[Submenu_Item_Cur]+'px'; | ||
+ | Submenu_Obj[Submenu_Item_Cur-1].style.display='block'; | ||
+ | if (Submenu_Handle) {clearTimeout(Submenu_Handle);Submenu_Handle = null;} | ||
+ | ItemGrowth(); | ||
+ | } | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | Submenu_Item_Des = i; | ||
+ | if (i==0) | ||
+ | { | ||
+ | Submenu_Handle_State = 2; | ||
+ | Submenu_Handle = setTimeout(ToWither,1000); | ||
+ | } | ||
+ | else if (i!=Submenu_Item_Cur) | ||
+ | { | ||
+ | if (Submenu_Handle) {clearTimeout(Submenu_Handle);Submenu_Handle = null;} | ||
+ | Submenu_Handle_State = 3; | ||
+ | ItemWither(); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | else if (Submenu_Handle_State==2) | ||
+ | { | ||
+ | Submenu_Item_Des = i; | ||
+ | if (i!=0) | ||
+ | { | ||
+ | clearTimeout(Submenu_Handle);Submenu_Handle = null; | ||
+ | if (i==Submenu_Item_Cur) | ||
+ | { | ||
+ | Submenu_Handle_State = 0; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | Submenu_Handle_State = 3; | ||
+ | ItemWither(); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | else if (Submenu_Handle_State==3) | ||
+ | { | ||
+ | Submenu_Item_Des = i; | ||
+ | if (i==Submenu_Item_Cur) | ||
+ | { | ||
+ | clearTimeout(Submenu_Handle);Submenu_Handle = null; | ||
+ | Submenu_Handle_State = 1; | ||
+ | ItemGrowth(); | ||
+ | } | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | if (i!=Submenu_Item_Cur) | ||
+ | { | ||
+ | Submenu_Item_Des = i; | ||
+ | clearTimeout(Submenu_Handle);Submenu_Handle = null; | ||
+ | Submenu_Handle_State = 3; | ||
+ | ItemWither(); | ||
+ | } | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
</script> | </script> | ||
+ | <div id="text-body"> | ||
</html> | </html> |
Revision as of 16:42, 21 September 2012