Team:Peking/LeftBar
From 2010.igem.org
(Difference between revisions)
Evamonlight (Talk | contribs) |
|||
(13 intermediate revisions not shown) | |||
Line 9: | Line 9: | ||
/* sidebar left */ | /* sidebar left */ | ||
/*----------------------------------------------------------------------------*/ | /*----------------------------------------------------------------------------*/ | ||
- | + | #lsidebar { | |
- | # | + | |
width: 172px; | width: 172px; | ||
margin: 20px 7px 0 0px; | margin: 20px 7px 0 0px; | ||
- | position: | + | position: relative; |
float: left; | float: left; | ||
text-align: left; | text-align: left; | ||
} | } | ||
- | # | + | #lsidebar_extra { |
margin-top: 0px; | margin-top: 0px; | ||
} | } | ||
- | # | + | #lsidebar ul { |
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
Line 29: | Line 28: | ||
</style> | </style> | ||
- | |||
- | < | + | </html> |
+ | |||
+ | <div id="lsidebar"> | ||
<hr size=4px width=172px color=00009f> | <hr size=4px width=172px color=00009f> | ||
- | <font size=3><font color=00009f>< | + | <font size=3><font color=00009f><font face="Showcard Gothic">Overview</font></font></font> |
- | + | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | <!-- | ||
+ | ul#menu { | ||
+ | width: 172px; | ||
+ | list-style: none; | ||
+ | border-top: solid 1px #b9a894; | ||
+ | margin: 20px13px7px; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | ul#menu ol { | ||
+ | display: none; | ||
+ | text-align: center; | ||
+ | list-style-type: none; | ||
+ | margin: 0px 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | ul#menu li, | ||
+ | ul#menu a { | ||
+ | font-family: "Comic Sans MS", Arial, Sans-serif; | ||
+ | font-size: 13px; | ||
+ | color: #000000; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | ul#menu li { | ||
+ | border-bottom: solid 1px #b9a894; | ||
+ | line-height: 15px; | ||
+ | } | ||
+ | |||
+ | ul#menu ol li { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | ul#menu ol li:before { | ||
+ | content: ""; | ||
+ | } | ||
+ | |||
+ | ul#menu a { | ||
+ | display: block; | ||
+ | width: 160px; | ||
+ | height: 19px; | ||
+ | border: 1px solid #bbb; | ||
+ | margin-top: 0px; | ||
+ | background: url(https://static.igem.org/mediawiki/2010/d/d0/Main.jpg) no-repeat left top; | ||
+ | padding: 2px 4px; | ||
+ | text-decoration: none; | ||
+ | color: #000 | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | ul#menu a:hover { | ||
+ | display: block; | ||
+ | width: 160px; | ||
+ | height: 19px; | ||
+ | border: 1px solid #bbb; | ||
+ | margin-top: 1px; | ||
+ | background: url(https://static.igem.org/mediawiki/2010/8/8e/ONHOVER.jpg) no-repeat left top; | ||
+ | padding: 2px 4px; | ||
+ | color: #0000ff; | ||
+ | } | ||
+ | |||
+ | ul#menu a.active { | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 2px 4px; | ||
+ | width: 160px; | ||
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
+ | background: url(https://static.igem.org/mediawiki/2010/f/f0/Active.jpg) repeat-x bottom; | ||
+ | } | ||
+ | --> | ||
+ | </style> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | var | + | <!-- |
- | + | /* This script and many more are available free online at | |
- | var | + | The JavaScript Source :: http://javascript.internet.com |
- | var | + | Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */ |
- | var | + | |
- | + | /* Coded by Travis Beckham | |
- | + | http://www.squidfingers.com | http://www.podlob.com | |
- | + | version date: 06/02/03 | |
- | + | If want to use this code, feel free to do so, but please leave this message intact. */ | |
- | + | ||
- | + | // Node Functions | |
- | else | + | |
- | document. | + | if(!window.Node){ |
- | + | var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3}; | |
- | document. | + | } |
- | + | ||
- | + | function checkNode(node, filter){ | |
- | + | return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase()); | |
- | + | } | |
- | + | ||
- | document. | + | function getChildren(node, filter){ |
+ | var result = new Array(); | ||
+ | var children = node.childNodes; | ||
+ | for(var i = 0; i < children.length; i++){ | ||
+ | if(checkNode(children[i], filter)) result[result.length] = children[i]; | ||
+ | } | ||
+ | return result; | ||
+ | } | ||
+ | |||
+ | function getChildrenByElement(node){ | ||
+ | return getChildren(node, "ELEMENT_NODE"); | ||
+ | } | ||
+ | |||
+ | function getFirstChild(node, filter){ | ||
+ | var child; | ||
+ | var children = node.childNodes; | ||
+ | for(var i = 0; i < children.length; i++){ | ||
+ | child = children[i]; | ||
+ | if(checkNode(child, filter)) return child; | ||
+ | } | ||
+ | return null; | ||
+ | } | ||
+ | |||
+ | function getFirstChildByText(node){ | ||
+ | return getFirstChild(node, "TEXT_NODE"); | ||
+ | } | ||
+ | |||
+ | function getNextSibling(node, filter){ | ||
+ | for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){ | ||
+ | if(checkNode(sibling, filter)) return sibling; | ||
+ | } | ||
+ | return null; | ||
+ | } | ||
+ | function getNextSiblingByElement(node){ | ||
+ | return getNextSibling(node, "ELEMENT_NODE"); | ||
+ | } | ||
+ | |||
+ | // Menu Functions & Properties | ||
+ | |||
+ | var activeMenu; | ||
+ | var lastClicked; | ||
+ | |||
+ | function showMenu() { | ||
+ | if(activeMenu){ | ||
+ | activeMenu.className = ""; | ||
+ | getNextSiblingByElement(activeMenu).style.display = "none"; | ||
+ | } | ||
+ | if(this == activeMenu) | ||
+ | { | ||
+ | activeMenu = null; | ||
+ | lastClicked = null; | ||
+ | } else { | ||
+ | this.className = "active"; | ||
+ | getNextSiblingByElement(this).style.display = "block"; | ||
+ | activeMenu = this; | ||
+ | lastClicked = this.textContent; | ||
+ | window.name = lastClicked; | ||
+ | } | ||
+ | |||
+ | return false; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | function initMenu(){ | ||
+ | var menus, menu, text, a, i; | ||
+ | menus = getChildrenByElement(document.getElementById("menu")); | ||
+ | |||
+ | for(i = 0; i < menus.length; i++){ | ||
+ | menu = menus[i]; | ||
+ | text = getFirstChildByText(menu); | ||
+ | a = document.createElement("a"); | ||
+ | menu.replaceChild(a, text); | ||
+ | a.appendChild(text); | ||
+ | a.href = "#"; | ||
+ | a.onclick = showMenu; | ||
+ | a.onfocus = function(){this.blur()}; | ||
+ | if (a.textContent == window.name) | ||
+ | { | ||
+ | a.className = "active"; | ||
+ | getNextSiblingByElement(a).style.display = "block"; | ||
+ | activeMenu = a; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | if(document.createElement) window.onload = initMenu; | ||
+ | //--> | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <table align=left cellspacing=0 cellpadding=0> | ||
+ | <tr><td> | ||
+ | <ul id="menu"> | ||
+ | <li>Temp | ||
+ | <ol> | ||
+ | <lie><a href="https://2010.igem.org/Team:Peking/Team">Team</a> | ||
+ | <li><a href="https://2010.igem.org/Team:Peking/Project">Project</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:Peking/Parts">Parts</a></li> | ||
+ | |||
+ | <li><a href="https://2010.igem.org/Team:Peking/Modeling">Modeling</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:Peking/Notebook">Notebook</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:Peking/Human_Practice">Human Practice</a></li> | ||
+ | </ol> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </td></tr></table> | ||
+ | <br><br><br><br><br><br><br><br><br><br><br><br><br><br> | ||
+ | |||
+ | </body> | ||
+ | |||
</html> | </html> | ||
+ | |||
+ | |||
<hr size=4px width=172px color=00009f> | <hr size=4px width=172px color=00009f> | ||
- | <font size=3><font color=00009f>< | + | <font size=3><font color=00009f><font face="Showcard Gothic">CountDown</font></font></font> |
+ | |||
+ | <!--the countdown code--> | ||
+ | |||
+ | <html> | ||
+ | <div id="countdown"> | ||
+ | <object type="application/x-shockwave-flash" data="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=00009f&bgcolor=ffffff&date_month=11&date_day=4&date_year=0&un=IGEM JAMBOREE 2010&size=small&mo=11&da=4&yr=2010" width="172" height="58"> | ||
+ | <param name="movie" value="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=00009f&bgcolor=ffffff&date_month=11&date_day=4&date_year=0&un=IGEM JAMBOREE 2010&size=small&mo=11&da=4&yr=2010" /><param name="bgcolor" value="ffffff" /></object> | ||
+ | </div> | ||
+ | </html> | ||
+ | |||
+ | <!--end of the countdown code--> | ||
+ | |||
<br> | <br> | ||
- | < | + | <hr size=4px width=172px color=00009f> |
- | <a href="http://www3.clustrmaps.com/counter/maps.php?url=https://2010.igem.org/Team:Peking" id="clustrMapsLink"><img src="http://www3.clustrmaps.com/counter/index2.php?url=https://2010.igem.org/Team:Peking" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" /> | + | <font size=3><font color=00009f><font face="Showcard Gothic">Vistors From...</font></font></font> |
+ | |||
+ | |||
+ | <html> | ||
+ | <a href="http://www3.clustrmaps.com/counter/maps.php?url=https://2010.igem.org/Team:Peking" id="clustrMapsLink"><img src="http://www3.clustrmaps.com/counter/index2.php?url=https://2010.igem.org/Team:Peking" width="172px" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" /> | ||
</a> | </a> | ||
- | </html></ | + | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
+ | </html> | ||
+ | |||
+ | </div> |
Latest revision as of 09:12, 19 August 2010