Team:HKU-HKBU/home

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:HKU-HKBU/style.css}}
+
<html>
-
{{Team:HKU-HKBU/script.js}}
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-
{{Team:HKU-HKBU/header}}
+
-
=Coming soon...=
+
<script type="text/javascript" src="ddaccordion.js">
-
{{Team:HKU-HKBU/footer}}
+
/***********************************************
 +
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
 +
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
 +
* This notice must stay intact for legal use
 +
***********************************************/
 +
 
 +
</script>
 +
 
 +
 
 +
<script type="text/javascript">
 +
 
 +
 
 +
ddaccordion.init({
 +
headerclass: "submenuheader", //Shared CSS class name of headers group
 +
contentclass: "submenu", //Shared CSS class name of contents group
 +
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
 +
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
 +
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
 +
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
 +
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
 +
animatedefault: false, //Should contents open by default be animated into view?
 +
persiststate: true, //persist state of opened contents within browser session?
 +
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 +
togglehtml: ["suffix", "<img src='http://www.dynamicdrive.com/dynamicindex17/plus.gif' class='statusicon' />", "<img src='http://www.dynamicdrive.com/dynamicindex17/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
 +
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
 +
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
 +
var menuBar = document.getElementById("glossymenu");
 +
var aNodes  = menuBar.getElementsByTagName("a");
 +
for (var i = 0; i < aNodes.length; i++)
 +
{
 +
alert(aNodes[i].attributes.getNamedItem("href").value + "\n" + document.URL);
 +
if(aNodes[i].attributes.getNamedItem("href").value == document.URL)
 +
{
 +
alert("!!!");
 +
}
 +
}
 +
},
 +
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 +
//do nothing
 +
}
 +
})
 +
 
 +
 
 +
</script>
 +
 
 +
 
 +
<style type="text/css">
 +
 
 +
.glossymenu{
 +
margin: 5px 0;
 +
padding: 0;
 +
width: 220px; /*width of menu*/
 +
border: 1px solid #9A9A9A;
 +
border-bottom-width: 0;
 +
}
 +
 
 +
.glossymenu a.menuitem{
 +
background: black url(http://www.dynamicdrive.com/dynamicindex17/glossyback.gif) repeat-x bottom left;
 +
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
 +
color: white;
 +
display: block;
 +
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
 +
width: auto;
 +
padding: 4px 0;
 +
padding-left: 10px;
 +
text-decoration: none;
 +
}
 +
 
 +
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
 +
color: white;
 +
}
 +
 
 +
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
 +
position: absolute;
 +
top: 5px;
 +
right: 5px;
 +
border: none;
 +
}
 +
 
 +
.glossymenu a.menuitem:hover{
 +
background-image: url(http://www.dynamicdrive.com/dynamicindex17/glossyback2.gif);
 +
}
 +
 
 +
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
 +
background: white;
 +
}
 +
 
 +
.glossymenu div.submenu ul{ /*UL of each sub menu*/
 +
list-style-type: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
.glossymenu div.submenu ul li{
 +
border-bottom: 1px solid blue;
 +
}
 +
 
 +
.glossymenu div.submenu ul li a{
 +
display: block;
 +
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
 +
color: black;
 +
text-decoration: none;
 +
padding: 2px 0;
 +
padding-left: 10px;
 +
}
 +
 
 +
.glossymenu div.submenu ul li a:hover{
 +
background: #DFDCCB;
 +
colorz: white;
 +
}
 +
 
 +
</style>
 +
 
 +
<div class="glossymenu"  id="glossymenu">
 +
<a class="menuitem" href="">Home</a>
 +
<a class="menuitem" href="">Project</a>
 +
<a class="menuitem" href="">Parts</a>
 +
<a class="menuitem submenuheader" href="" >Micro-Motor</a>
 +
<div class="submenu">
 +
<ul>
 +
<li><a href="file:///C:\page\menu.html">Overview</a></li>
 +
<li><a href="">Membrane Version</a></li>
 +
<li><a href="">Silicon Version</a></li>
 +
<li><a href="">Methodology</a></li>
 +
</ul>
 +
</div>
 +
<a class="menuitem submenuheader" href="" >Polar Expression</a>
 +
<div class="submenu">
 +
<ul>
 +
<li><a href="">Design</a></li>
 +
<li><a href="">Results</a></li>
 +
<li><a href="">Methodology</a></li>
 +
</ul>
 +
</div>
 +
<a class="menuitem submenuheader" href="" >Speed Control</a>
 +
<div class="submenu">
 +
<ul>
 +
<li><a href="">Design</a></li>
 +
<li><a href="">Results</a></li>
 +
<li><a href="">Methodology</a></li>
 +
</ul>
 +
</div>
 +
<a class="menuitem" href="" >Modeling</a>
 +
<a class="menuitem" href="" >Applications</a>
 +
<a class="menuitem submenuheader" href="" >Human Practice</a>
 +
<div class="submenu">
 +
<ul>
 +
<li><a href="">Questionaire</a></li>
 +
<li><a href="">Website</a></li>
 +
<li><a href="">Interview</a></li>
 +
<li><a href="">Lecture</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
</html>

Revision as of 08:14, 17 October 2009