Team:Peking/SideBar

From 2010.igem.org

(Difference between revisions)
Line 70: Line 70:
<div id="lsidebar">
<div id="lsidebar">
-
<!--the start of the hover menu navigation-->
+
<hr size=4px width=172px color=00009f>
-
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
+
<font size=3><font color=00009f><b><i>Overview</i></b></font></font>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>
<head>
<head>
-
<title> color changing hover meau navigation</title>
 
-
<meta http-equiv="content-type" content="text/html;charset=gb2312">
 
-
<!--Add the following codes between <head> and </head>-->
 
<style type="text/css">
<style type="text/css">
-
*{margin:0;padding:0;color:#000000;}
+
<!--
-
body{font:12px 楷体_GB2312;}
+
ul#menu {
-
#nav{
+
  width: 158px;
-
margin:5px;
+
  list-style: none;
 +
  border-top: solid 1px #b9a894;
 +
  margin: 20px13px7px;
 +
  padding: 0;
 +
  position: relative;
 +
  float: left;
}
}
-
#nav li{
+
 
-
position:relative;
+
ul#menu ol {
-
list-style:none;
+
  display: none;
-
width:172px;/*change the width*/
+
  text-align: center;
 +
  list-style-type: none;
 +
  margin: 0px 0;
 +
  padding: 0;
}
}
-
#nav li a{
+
 
-
background:#ccc;
+
ul#menu li,
-
padding:5px;
+
  ul#menu a {
-
width:100px;
+
  font-family: "Trebuchet MS", Arial, Sans-serif;
-
border-top:1px solid #ccc;
+
  font-size: 13px;
-
text-decoration:none;
+
  color: #000000;
-
height:25px;
+
  margin: 0;
-
display:block;
+
-
text-align:center;line-height:25px;
+
}
}
-
#nav li a:hover{
+
 
-
background:#FFCC00;line-height:25px;height:25px;
+
ul#menu li {
 +
  border-bottom: solid 1px #b9a894;
 +
  line-height: 15px;
}
}
-
#nav ul ul{
+
 
-
position:absolute;
+
ul#menu ol li {
-
top:36px;
+
  border-bottom: none;
-
left:0px;
+
-
visibility:hidden;
+
}
}
-
#nav ul :hover ul{
+
 
-
visibility:visible;
+
ul#menu ol li:before {
 +
  content: "";
}
}
-
#nav ul ul li a{
+
 
-
display:block;
+
ul#menu a {
-
width:100px;
+
  display: block;
-
margin:0;
+
  width: 150px;
-
height:25px;
+
  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;
}
}
-
#nav table{
+
 
-
position:absolute;
+
ul#menu a:hover {
-
top:0;
+
    display: block;
-
left:0;
+
    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;
}
}
-
hr{
+
 
-
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>
-
</head>
 
-
<body>
 
-
<!--Add the following codes between <body> and </body>-->
 
-
<div id="Project Overview">
 
-
<hr size=4px width=172px color=00009f>
+
<script type="text/javascript">
-
<font size=3><font color=00009f><b><i>Project Overview</i></b></font></font>
+
<!--
-
<br>
+
/* 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 */
-
<div id="nav">
+
/* Coded by Travis Beckham
-
  <ul>
+
  http://www.squidfingers.com | http://www.podlob.com
-
    <li>
+
  version date: 06/02/03
-
    <a href="#">Overview
+
   If want to use this code, feel free to do so, but please leave this message intact. */
-
  <!--[if IE 7]><!--></a><!--<![endif]-->
+
-
  <!--[if lte IE 6]><table cellspacing="0"><tr><td><![endif]-->
+
-
  <ul>
+
-
            <li><a href="#">Team</a></li>
+
-
            <li><a href="#">Project</a></li>
+
-
            <li><a href="#">Modelling</a></li>
+
-
            <li><a href="#">blabla</a></li>     
+
-
  </ul>
+
-
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
+
-
   </li>
+
-
  </ul>
+
-
  <hr>
+
-
</div>
+
-
<div id="nav">
+
// Node Functions
-
  <ul>
+
-
    <li>
+
-
    <a href="#">Overview2
+
-
  <!--[if IE 7]><!--></a><!--<![endif]-->
+
-
  <!--[if lte IE 6]><table cellspacing="0"><tr><td><![endif]-->
+
-
  <ul>
+
-
            <li><a href="#">Team</a></li>
+
-
            <li><a href="#">Project</a></li>
+
-
            <li><a href="#">Modelling</a></li>
+
-
            <li><a href="#">blabla</a></li>     
+
-
  </ul>
+
-
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
+
-
  </li>
+
-
  </ul>
+
-
  <hr>
+
-
</div>
+
-
<div id="nav">
+
if(!window.Node){
-
   <ul>
+
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
-
    <li>
+
}
-
     <a href="#">Overview3
+
 
-
  <!--[if IE 7]><!--></a><!--<![endif]-->
+
function checkNode(node, filter){
-
  <!--[if lte IE 6]><table cellspacing="0"><tr><td><![endif]-->
+
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
-
   <ul>
+
}
-
            <li><a href="#">Team</a></li>
+
 
-
            <li><a href="#">Project</a></li>
+
function getChildren(node, filter){
-
            <li><a href="#">Modelling</a></li>
+
  var result = new Array();
-
            <li><a href="#">blabla</a></li>       
+
  var children = node.childNodes;
-
   </ul>
+
  for(var i = 0; i < children.length; i++){
-
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
+
    if(checkNode(children[i], filter)) result[result.length] = children[i];
-
  </li>
+
  }
-
   </ul>
+
  return result;
-
   <hr>
+
}
-
</div>
+
 
 +
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>
 +
<body>
 +
 
 +
<table align=left cellspacing=0 cellpadding=0>
 +
<tr><td>
 +
<ul id="menu">
 +
<li>DNA Assembly
 +
     <ol>
 +
      <lie><a href="https://2009.igem.org/Team:Alberta/Project/assemblyoverview">Overview</a>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/ByteCreation">Byte Creation</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/DNAanchor">Anchor/Terminator</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Optimization">Optimization</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/linearconstruct">Linear Constructs</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/plasmidconstruct">Plasmid Constructs</a></li>
 +
    </ol>
 +
   </li>
 +
<li>Automation
 +
    <ol>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/AutomationOverview">Overview</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Microfluidics">Microfluidics</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Automation">DIY Automation</a></li>
 +
    </ol>
 +
  </li>
 +
  <li>Organism Design
 +
    <ol>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Bioinformatics">Overview</a>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Gene_Selection">Gene Selection</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Modeling">Modeling</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/ModelValid">Model Validation</a></li>
 +
       <li><a href="https://2009.igem.org/Team:Alberta/Project/Promoters_&_Terminators">Promoter/Terminator</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Primer_Design">Primer Design</a></li>
 +
    </ol>
 +
   </li>
 +
   <li>Chromosome Assembly
 +
    <ol>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Chromosome Assembly">Overview</a></li>
 +
  <li><a href="https://2009.igem.org/Team:Alberta/Project/Recombineering">Recombineering</a></li>
 +
    </ol>
 +
   <li>Human Practices
 +
    <ol>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Outreach">Overview</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Presentations">Presentations</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Surveys">Feedback</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/UofADebate">U of A Debate</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Debate_Outreach"> HS Debate Outreach</a></li>
 +
      <li><a href="https://2009.igem.org/Team:Alberta/Project/Safety">Safety</a></li>
 +
    </ol>
 +
   </li>
 +
</ul>
 +
</td></tr></table>
-
</div>
 
</body>
</body>
 +
</html>
</html>
-
<!-- the end of the HMN-->
 
-
 
+
<br>
-
<hr size=4px width=172px color=00009f>
+
<font size=3><font color=00009f><b><i>CountDown</i></b></font></font>
<font size=3><font color=00009f><b><i>CountDown</i></b></font></font>

Revision as of 14:59, 10 July 2010