Team:Calgary/Sandbox2

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<script type="text/javascript">
+
<style>
 +
body {margin:25px; font:12px Verdana, Arial, Helvetica}
 +
* {padding:0; margin:0}
 +
.dropdown {float:left; padding-right:5px}
 +
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
 +
.dropdown dt:hover {background:url(images/header_over.gif)}
 +
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
 +
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
 +
.dropdown li {display:inline}
 +
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
 +
.dropdown a:hover {background:#d9e1e4; color:#000}
 +
.dropdown .underline {border-bottom:1px solid #b9d6dc}
 +
</style>
 +
<script type="text/javascript">
 +
var DDSPEED = 10;
-
var timeout = 500;
+
var DDTIMER = 15;
-
var closetimer = 0;
+
-
var ddmenuitem = 0;
+
-
// open hidden layer
 
-
function mopen(id)
 
-
{
 
-
mcancelclosetime();
 
-
 
-
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
-
 
-
// get new layer and show it
 
-
ddmenuitem = document.getElementById(id);
 
-
ddmenuitem.style.visibility = 'visible';
 
-
 
-
}
 
-
// close showed layer
 
-
function mclose()
 
-
{
 
-
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
-
}
 
-
 
-
// go close timer
 
-
function mclosetime()
 
-
{
 
-
closetimer = window.setTimeout(mclose, timeout);
 
-
}
 
-
 
-
// cancel close timer
 
-
function mcancelclosetime()
 
-
{
 
-
if(closetimer)
 
-
{
 
-
window.clearTimeout(closetimer);
 
-
closetimer = null;
 
-
}
 
-
}
 
-
// close layer when click-out
+
// main function to handle the mouse events //
-
document.onclick = mclose;
+
-
</script>
+
function ddMenu(id,d){
-
<style>
+
  var h = document.getElementById(id + '-ddheader');
-
body{
+
  var c = document.getElementById(id + '-ddcontent');
-
background-color: #808080;
+
-
}
+
-
p {
+
  clearInterval(c.timer);
-
font-family: Verdana, sans-serif;
+
-
}
+
-
a {
+
  if(d == 1){
-
font-family: Verdana, sans-serif;
+
-
}
+
-
li{
+
    clearTimeout(h.timer);
-
font-family: Verdana, sans-serif;
+
-
}
+
-
h2{
+
    if(c.maxh && c.maxh <= c.offsetHeight){return}
-
color:#0066CC;
+
-
}
+
-
h4{
+
    else if(!c.maxh){
-
color:#003366;
+
-
}
+
 +
      c.style.display = 'block';
-
img.bannerImage{
+
      c.style.height = 'auto';
-
margin-top: -56px;
+
-
margin-left: -5px;
+
-
z-index: 0;
+
-
}
+
 +
      c.maxh = c.offsetHeight;
-
div.menuBar{
+
      c.style.height = '0px';
-
margin-left: -5px;
+
-
width: 920px;
+
-
height: 25px;
+
-
margin-bottom: 20px;
+
-
margin-top: -45px;
+
-
float: left;
+
-
}
+
 +
    }
-
#nav {
+
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
-
margin: 0;
+
-
padding: 0;
+
-
z-index: 30;
+
-
position: relative;
+
-
}
+
-
+
-
#nav li {
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style: none;
+
-
float: left;
+
-
font: bold 12px verdana;
+
-
}
+
-
#nav li a {
+
  }
-
display: block;
+
  else{
-
margin: 0 0 0 0;
+
-
padding: 6px 10px;
+
-
width: 82px;
+
-
background: #8bff35;
+
-
color: #000;
+
-
text-align: center;
+
-
text-decoration: none;
+
-
border-right: 2px solid #131313;
+
    h.timer = setTimeout(function(){ddCollapse(c)},50);
-
}
+
-
#nav li .menuend{
+
  }
-
border-right: 2px solid #8bff35;
+
-
width: 66px;
+
-
}
+
 +
}
-
#nav li a:hover {
 
-
color: #FFF;
 
-
}
 
-
#nav div {
 
-
position: absolute;
 
-
visibility: hidden;
 
-
margin: 0;
 
-
padding: 0;
 
-
background: #131313;
 
-
}
 
-
#nav div a {
+
// collapse the menu //
-
position: relative;
+
-
display: block;
+
-
margin: 0;
+
-
padding: 5px 10px;
+
-
width: 150px;
+
-
white-space: nowrap;
+
-
text-align: left;
+
-
text-decoration: none;
+
-
left: -2px;
+
function ddCollapse(c){
-
background: #8bff35;
+
-
color: #000;
+
-
font: 12px Verdana;
+
-
border-left: 2px solid #131313;
+
-
border-right: 3px solid #8bff35;
+
-
}
+
-
#nav div a:hover {
+
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
-
background: #8bff35;
+
-
color: #FFF;
+
-
border-left: 2px solid #131313;
+
-
border-right: 3px solid #8bff35;
+
-
}
+
-
</style>
+
}
-
</head>
+
-
<body>
 
 +
// cancel the collapse if a user rolls over the dropdown //
 +
function cancelHide(id){
-
<img src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Header4.png" class="bannerImage" title="University of Calgary iGEM Team 2010"></img>
+
  var h = document.getElementById(id + '-ddheader');
-
<div class="menuBar">
+
  var c = document.getElementById(id + '-ddcontent');
-
<ul id="nav">
+
-
<li>
+
  clearTimeout(h.timer);
-
<a href="https://2011.igem.org/Team:Calgary"
+
-
onmouseover="mopen('m1')"
+
-
onmouseout="mclosetime()">
+
-
Home</a>
+
-
</li>
+
-
<li>
+
  clearInterval(c.timer);
-
<a href="https://2011.igem.org/Team:Calgary/Team"
+
-
onmouseover="mopen('m2')"
+
-
onmouseout="mclosetime()">
+
-
Team</a>
+
-
<div id="m2"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Team">Official Team Profile</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Team/Biographies">Biographies</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Team/Facilitators">Facilitators</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Team/About_The_University">About the University</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Team/Acknowledgements">Acknowledgements</a>
+
-
</div>
+
-
</li>
+
-
<li>
+
  if(c.offsetHeight < c.maxh){
-
<a href="https://2011.igem.org/Team:Calgary/Project"
+
-
onmouseover="mopen('m3')"
+
-
onmouseout="mclosetime()">
+
-
Project</a>
+
-
<div id="m3"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Project">Overview</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/Transcription">Transcription/Translation</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/misfolding_overview">Protein Misfolding</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/Controls">Testing Our System</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/Achievements">Achievements</a>
+
-
</div>
+
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
-
</li>
+
-
+
-
<li><a href="https://2011.igem.org/Team:Calgary/Parts/Parts_Submitted"
+
  }
-
onmouseover="mopen('m4')"
+
-
onmouseout="mclosetime()">
+
-
Parts</a>
+
-
<div id="m4"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Parts/Parts_Submitted">Parts Submitted</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Parts/Characterization">Characterization</a>
+
-
</div>
+
-
</li>
+
 +
}
-
<li><a href="https://2011.igem.org/Team:Calgary/Notebook"
 
-
onmouseover="mopen('m5')"
 
-
onmouseout="mclosetime()">
 
-
Notebook</a>
 
-
<div id="m5"
 
-
onmouseover="mcancelclosetime()"
 
-
onmouseout="mclosetime()">
 
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Calendar">Calendar</a>
 
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Future_Directions">Future Directions</a>
 
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Safety_And_Protocols">Protocols</a>
 
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Safety">Safety</a>
 
-
</div>
 
-
</li>
 
-
<li><a href="https://2011.igem.org/Team:Calgary/Modelling"
+
// incrementally expand/contract the dropdown and change the opacity //
-
onmouseover="mopen('m6')"
+
-
onmouseout="mclosetime()">
+
-
Modelling</a>
+
-
<div id="m6"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Modelling/MATLAB">MATLAB</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Modelling/Maya">Animation</a>
+
-
</div>
+
-
</li>
+
 +
function ddSlide(c,d){
-
<li><a href="https://2011.igem.org/Team:Calgary/Community"
+
  var currh = c.offsetHeight;
-
onmouseover="mopen('m7')"
+
-
onmouseout="mclosetime()">
+
-
Community</a>
+
-
<div id="m7"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Ethics">Ethics/Human Practices</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Gallery">Gallery</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Conferences">Conferences</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Suffield">DRDC Suffield</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Podcasts">Podcasts</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Blog">Visit Our Blog!</a>
+
-
</div>
+
-
</li>
+
-
<li><a href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
+
  var dist;
-
<li><a class="menuend" href="https://2011.igem.org/Team:Calgary/Extras">Extras</a></li>
+
  if (d == 1){
-
</ul>
+
    dist = (Math.round((c.maxh - currh) / DDSPEED));
 +
  }  else{
-
</div>
+
    dist = (Math.round(currh / DDSPEED));
 +
  }
 +
 +
  if(dist <= 1 && d == 1){
 +
 +
    dist = 1;
 +
 +
  }
 +
 +
  c.style.height = currh + (dist * d) + 'px';
 +
 +
  c.style.opacity = currh / c.maxh;
 +
 +
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
 +
 +
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
 +
 +
    clearInterval(c.timer);
 +
  }
 +
 +
}
 +
</script>
 +
 +
 +
</head>
 +
 +
 +
<body>
 +
<dl class="dropdown">
 +
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
 +
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
 +
    <ul>
 +
      <li><a href="#" class="underline">Navigation Item 1</a></li>
 +
      <li><a href="#" class="underline">Navigation Item 2</a></li>
 +
      <li><a href="#" class="underline">Navigation Item 3</a></li>
 +
      <li><a href="#" class="underline">Navigation Item 4</a></li>
 +
      <li><a href="#">Navigation Item 5</a></li>
 +
    </ul>
 +
  </dd>
 +
</dl>
-
+
<dl class="dropdown">
 +
  <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
 +
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
 +
    <ul>
 +
      <li><a href="#" class="underline">Navigation Item 1</a></li>
 +
      <li><a href="#" class="underline">Navigation Item 2</a></li>
 +
      <li><a href="#" class="underline">Navigation Item 3</a></li>
 +
      <li><a href="#" class="underline">Navigation Item 4</a></li>
 +
      <li><a href="#">Navigation Item 5</a></li>
 +
    </ul>
 +
  </dd>
 +
</dl>
 +
<div style="clear:both" />
 +
</body>
</body>
</html>
</html>

Revision as of 21:32, 27 June 2011

Dropdown One
Dropdown Two

Retrieved from "http://2011.igem.org/Team:Calgary/Sandbox2"