Team:Peking/LeftBar
From 2010.igem.org
(Difference between revisions)
Line 33: | Line 33: | ||
<div id="lsidebar"> | <div id="lsidebar"> | ||
- | < | + | <hr size=4px width=172px color=00009f> |
- | < | + | <font size=3><font color=00009f><b><i>Overview</i></b></font></font> |
- | <html | + | <html> |
<head> | <head> | ||
- | |||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | + | <!-- | |
- | + | ul#menu { | |
- | + | width: 158px; | |
- | + | list-style: none; | |
+ | border-top: solid 1px #b9a894; | ||
+ | margin: 20px13px7px; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | float: left; | ||
} | } | ||
- | # | + | |
- | + | ul#menu ol { | |
- | list-style:none; | + | display: none; |
- | + | text-align: center; | |
+ | list-style-type: none; | ||
+ | margin: 0px 0; | ||
+ | padding: 0; | ||
} | } | ||
- | # | + | |
- | + | ul#menu li, | |
- | + | ul#menu a { | |
- | + | font-family: "Trebuchet 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: ""; | ||
} | } | ||
- | + | ||
- | display:block; | + | ul#menu a { |
- | width: | + | display: block; |
- | margin:0; | + | width: 150px; |
- | + | height: 19px; | |
+ | border: 1px solid #bbb; | ||
+ | margin-top: 0px; | ||
+ | background: url(https://static.igem.org/mediawiki/2009/0/03/UofA_MainLink.gif) no-repeat left top; | ||
+ | padding: 2px 4px; | ||
+ | text-decoration: none; | ||
+ | color: #000 | ||
+ | outline: none; | ||
} | } | ||
- | # | + | |
- | + | ul#menu a:hover { | |
- | top: | + | display: block; |
- | left: | + | width: 150px; |
+ | height: 19px; | ||
+ | border: 1px solid #bbb; | ||
+ | margin-top: 1px; | ||
+ | background: url(https://static.igem.org/mediawiki/2009/a/a2/UofA_HoverLink.gif) no-repeat left top; | ||
+ | padding: 2px 4px; | ||
+ | color: #0000ff; | ||
} | } | ||
- | + | ||
- | display:none; | + | ul#menu a.active { |
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 2px 4px; | ||
+ | width: 150px; | ||
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
+ | background: url(https://static.igem.org/mediawiki/2009/1/10/UofA_Main.gif) repeat-x bottom; | ||
} | } | ||
+ | --> | ||
</style> | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | <!-- | ||
+ | /* This script and many more are available free online at | ||
+ | The JavaScript Source :: http://javascript.internet.com | ||
+ | Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */ | ||
+ | |||
+ | /* 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 | ||
+ | |||
+ | if(!window.Node){ | ||
+ | var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3}; | ||
+ | } | ||
+ | |||
+ | function checkNode(node, filter){ | ||
+ | return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase()); | ||
+ | } | ||
+ | |||
+ | 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> | ||
+ | |||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
- | |||
- | |||
- | < | + | <table align=left cellspacing=0 cellpadding=0> |
- | < | + | <tr><td> |
- | <br> | + | <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> | </body> | ||
- | |||
- | |||
- | |||
+ | </html> | ||
Revision as of 15:18, 10 July 2010