Team:Wageningen UR/Templates/NavigationTop

From 2011.igem.org

(Difference between revisions)
 
Line 1: Line 1:
<html>
<html>
-
<!-- TWO STEPS TO INSTALL GLIDE-IN MENU:
+
  <head>
 +
  <style type="text/css">
-
   1. Copy the coding into the HEAD of your HTML document
+
   @import url(http://fonts.googleapis.com/css?family=Ubuntu);
-
  2. Add the last code into the BODY of your HTML document  -->
+
   
-
<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
+
  #navTop
 +
{
 +
  background-color: transparent;
 +
  background-image: url('https://static.igem.org/mediawiki/2011/5/5f/Oscillation0.png');
 +
  background-position: center;
 +
  background-repeat: no-repeat;
 +
  float: right;
 +
  width: 780px;
 +
  height: 40px;
 +
  margin-left: 220px;
 +
  margin-bottom: 25px;
 +
  padding-left: 12px;
 +
  }
-
<HEAD>
+
#Oscillation1 {
 +
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 19px;
 +
  height: 40px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation1.hovered, #Oscillation1:hover {
 +
    background-image: url('https://static.igem.org/mediawiki/2011/1/11/Oscillation1.png');
 +
    background-position: 0px;
 +
  }
-
<!-- This script and many more are available free online at -->
 
-
<!-- The JavaScript Source!! http://javascript.internet.com -->
 
-
<!-- Original: David Sosnowski (support@codelifter.com) -->
+
#Oscillation2 {
-
<!-- Web Site:  http://www.codelifter.com -->
+
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 30px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
  #Oscillation2.hovered, #Oscillation2:hover {
 +
    background-image: url('https://static.igem.org/mediawiki/2011/b/bd/Oscillation2.png');
 +
    background-position: -24px;
 +
  }
-
<!--
+
#Oscillation3 {
-
Put the <style> script in the <head> of your page.
+
  background-image: transparent;
-
Set up the border, background-color, padding, and
+
  background-repeat: no-repeat;
-
font elements as needed. Leave the position as is.
+
  background-position: left center;
-
Width and height can be set as auto, or you can
+
  position: center;
-
specify these in pixels.
+
  width: 43px;
-
//-->
+
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation3.hovered, #Oscillation3:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/9/98/Oscillation3.png');
 +
  background-position: -60px;
 +
  }
-
<style>
+
#Oscillation4 {
 +
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 43px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation4.hovered, #Oscillation4:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/4/46/Oscillation4.png');
 +
  background-position: -109px;
 +
  }
-
#menuShow{
+
#Oscillation5 {  
-
border: 1px solid #666666;
+
  background-image: transparent;
-
background-color: #111111;
+
  background-repeat: no-repeat;
-
padding: 13px;
+
  background-position: left center;
-
font-size: 13px;
+
  position: center;
-
font-family: Verdana, Arial;
+
  width: 43px;
-
position: absolute;
+
  height: 37px;
-
width: auto;
+
  border-style: solid;
-
height: auto;
+
  border-width: 1px;  
-
}
+
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation5.hovered, #Oscillation5:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/a/a2/Oscillation5.png');
 +
  background-position: -158px;
 +
  }
-
#menuSelect{
+
#Oscillation6 {  
-
border: 1px solid #666666;
+
  background-image: transparent;
-
background-color: #111111;
+
  background-repeat: no-repeat;
-
padding: 13px;
+
  background-position: left center;
-
font-size: 13px;
+
  position: center;
-
font-family: Verdana, Arial;
+
  width: 43px;
-
position: absolute;
+
  height: 37px;
-
width: auto;
+
  border-style: solid;
-
height: auto;
+
  border-width: 1px;  
-
}
+
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation6.hovered, #Oscillation6:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/0/0c/Oscillation6.png');
 +
  background-position: -206px;
 +
  }
-
</style>
+
#Oscillation7 {
-
</HEAD>
+
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 43px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation7.hovered, #Oscillation7:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/0/00/Oscillation7.png');
 +
  background-position: -255px;
 +
  }
-
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
+
#Oscillation8 {
 +
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 43px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
  #Oscillation8.hovered, #Oscillation8:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/3/3a/Oscillation8.png');
 +
  background-position: -304px;
 +
  }
-
<BODY>
+
#Oscillation9 {
 +
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 43px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation9.hovered, #Oscillation9:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/1/1b/Oscillation9.png');
 +
  background-position: -353px;
 +
  }
-
<!--
+
#Oscillation10 {
-
Place the two <div>'s below in the <body> of your code.
+
  background-image: transparent;
-
(Normally, this will be immediately after the <body>
+
  background-repeat: no-repeat;
-
tag.) The menuShow div will contain your links; change
+
  background-position: left center;
-
the text, links, and targets as needed.
+
  position: center;
-
//-->
+
  width: 43px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation10.hovered, #Oscillation10:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/1/1b/Oscillation10.png');
 +
  background-position: -401px;
 +
  }
-
<div id="menuSelect">
+
#Oscillation11 {
-
<a href="#" onClick="moveOnMenu();moveOffSelector()">
+
  background-image: transparent;
-
<img src="icon.gif" width="28" height="28" border="0"></a>
+
  background-repeat: no-repeat;
-
</div>
+
  background-position: left center;
-
<div id="menuShow">
+
  position: center;
-
<a href="#" onClick="moveOffMenu();moveOnSelector()">
+
  width: 43px;
-
<img src="icon.gif" width="28" height="28" border="0"></a>
+
  height: 37px;
-
<br>
+
  border-style: solid;
-
<br>
+
  border-width: 1px;
-
<a href="http://www.codelifter.com">Menu Item A</a><br>
+
  border-color: transparent;
-
<a href="http://www.codelifter.com">Menu Item B</a><br>
+
  }
-
<a href="http://www.codelifter.com">Menu Item C</a><br>
+
 
-
<br>
+
#Oscillation11.hovered, #Oscillation11:hover {
-
<a href="http://www.codelifter.com">Menu Item D</a><br>
+
  background-image: url('https://static.igem.org/mediawiki/2011/b/b5/Oscillation11.png');
-
<a href="http://www.codelifter.com">Menu Item E</a><br>
+
  background-position: -450px;
-
<br>
+
  }
-
<a href="http://www.codelifter.com">Menu Item F</a><br>
+
-
<a href="http://www.codelifter.com">Menu Item G</a><br>
+
-
<a href="http://www.codelifter.com">Menu Item H</a><br>
+
-
</div>
+
-
<!--
+
#Oscillation12 {
-
Put the following script immediately *after* the
+
  background-image: transparent;
-
<div>'s (above) in your page. Set the variables as
+
  background-repeat: no-repeat;
-
indicated in the script.
+
  background-position: left center;
-
//-->
+
  position: center;
 +
  width: 40px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation12.hovered, #Oscillation12:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/0/0b/Oscillation12.png');
 +
  background-position: -499px;
 +
  }
-
<SCRIPT LANGUAGE="JavaScript">
+
#Oscillation13 {
-
<!-- Original: David Sosnowski (support@codelifter.com) -->
+
  background-image: transparent;
-
<!-- Web Site:  http://www.codelifter.com -->
+
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 40px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
  #Oscillation13.hovered, #Oscillation13:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/3/30/Oscillation13.png');
 +
  background-position: -545px;
 +
  }
-
<!-- This script and many more are available free online at -->
+
#Oscillation14 {
-
<!-- The JavaScript Source!! http://javascript.internet.com -->
+
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 40px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation14.hovered, #Oscillation14:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/b/b5/Oscillation14.png');
 +
  background-position: -590px;
 +
  }
-
<!-- Begin
+
#Oscillation15 {
-
// (C) 2001 www.CodeLifter.com
+
  background-image: transparent;
-
// http://www.codelifter.com
+
  background-repeat: no-repeat;
-
// Free for all users, but leave in this header.
+
  background-position: left center;
 +
  position: center;
 +
  width: 40px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation15.hovered, #Oscillation15:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/0/0a/Oscillation15.png');
 +
  background-position: -636px;
 +
  }
-
// Set Show to "yes" to show the menu on start-up.
+
#Oscillation16 {
-
// Set Show to "no" to show the selector on start-up.
+
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 38px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation16.hovered, #Oscillation16:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/1/1e/Oscillation16.png');
 +
  background-position: -682px;
 +
  }
-
Show ="yes";
 
-
// Set OffX in pixels to a negative number
+
#Oscillation17 {
-
// somewhat larger than the width of the menu.
+
  background-image: transparent;
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
  position: center;
 +
  width: 30px;
 +
  height: 37px;
 +
  border-style: solid;
 +
  border-width: 1px;
 +
  border-color: transparent;
 +
  }
 +
 
 +
#Oscillation17.hovered, #Oscillation17:hover {
 +
  background-image: url('https://static.igem.org/mediawiki/2011/5/54/Oscillation17.png');
 +
  background-position: -726px;
 +
  }
-
var OffX = -150;
 
-
// Set the PosX and PosY variables
+
  </style>
-
// to the location on the screen where the
+
-
// menu should position (in pixels) when stopped.
+
-
var PosX =  250;
+
  </head>
-
var PosY =  100;
+
-
// Usually, use the settings shown; but you can
+
    <body>
-
// change the speed and the increment of motion
+
-
// across the screen, below.
+
<div> <table id="navTop">
-
 
+
<td id="Oscillation1" class="hoverable">
-
var speed        = 1;
+
<td id="Oscillation2" class="hoverable">
-
var increment    = 1;
+
<td id="Oscillation3" class="hoverable">
-
var incrementNS4 = 5; // for slower NS4 browsers
+
                <td id="Oscillation4" class="hoverable">
-
 
+
                <td id="Oscillation5" class="hoverable">
-
// do not edit below this line
+
                <td id="Oscillation6" class="hoverable">
-
// ===========================
+
                <td id="Oscillation7" class="hoverable">
-
 
+
                <td id="Oscillation8" class="hoverable">
-
var is_NS = navigator.appName=="Netscape";
+
                <td id="Oscillation9" class="hoverable">
-
var is_Ver = parseInt(navigator.appVersion);
+
                <td id="Oscillation10" class="hoverable">
-
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
+
        <td id="Oscillation11" class="hoverable">
-
var is_NS5up = is_NS&&is_Ver>=5;
+
                <td id="Oscillation12" class="hoverable">
-
 
+
                <td id="Oscillation13" class="hoverable">
-
var MenuX = OffX;
+
                <td id="Oscillation14" class="hoverable">
-
var SelX = PosX;
+
        <td id="Oscillation15" class="hoverable">
-
var sPosX = PosX;
+
                <td id="Oscillation16" class="hoverable">
-
var sOffX = OffX;
+
                <td id="Oscillation17" class="hoverable">
-
 
+
                <td id="Oscillationend">
-
if (Show == "yes") {
+
</table>
-
sPosX = OffX;
+
</div>
-
sOffX = PosX;
+
-
MenuX = sOffX;
+
  </body>   
-
SelX = sPosX;
+
-
}
+
-
 
+
-
if (is_NS4) {
+
-
increment = incrementNS4;
+
-
Lq = "document.layers.";
+
-
Sq = "";
+
-
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
+
-
eval(Lq+'menuShow'+Sq+'.left=sOffX');
+
-
eval(Lq+'menuSelect'+Sq+'.top=PosY');
+
-
eval(Lq+'menuShow'+Sq+'.top=PosY');
+
-
} else {
+
-
Lq = "document.all.";
+
-
Sq = ".style";
+
-
document.getElementById('menuSelect').style.left = sPosX+"px";
+
-
document.getElementById('menuShow').style.left = sOffX+"px";
+
-
document.getElementById('menuSelect').style.top = PosY+"px";
+
-
document.getElementById('menuShow').style.top = PosY+"px";
+
-
} 
+
-
 
+
-
function moveOnMenu() {
+
-
if (MenuX < PosX) {
+
-
MenuX = MenuX + increment;
+
-
if (is_NS5up) {
+
-
document.getElementById('menuShow').style.left = MenuX+"px";
+
-
} else {
+
-
eval(Lq+'menuShow'+Sq+'.left=MenuX');
+
-
}
+
-
setTimeout('moveOnMenu()',speed);
+
-
  }
+
-
}
+
-
 
+
-
function moveOffMenu() {
+
-
if (MenuX > OffX) {
+
-
MenuX = MenuX - increment;
+
-
if (is_NS5up) {
+
-
document.getElementById('menuShow').style.left = MenuX+"px";
+
-
} else {
+
-
eval(Lq+'menuShow'+Sq+'.left=MenuX');
+
-
}
+
-
setTimeout('moveOffMenu()',speed);
+
-
  }
+
-
}
+
-
 
+
-
function moveOffSelector() {
+
-
if (SelX > OffX) {
+
-
SelX = SelX - increment;
+
-
if (is_NS5up) {
+
-
document.getElementById('menuSelect').style.left = SelX+"px";
+
-
} else {
+
-
eval(Lq+'menuSelect'+Sq+'.left=SelX');
+
-
}
+
-
setTimeout('moveOffSelector()',speed);
+
-
  }
+
-
}
+
-
 
+
-
function moveOnSelector() {
+
-
if (SelX < PosX) {
+
-
SelX = SelX + increment;
+
-
if (is_NS5up) {
+
-
document.getElementById('menuSelect').style.left = SelX+"px";
+
-
} else {
+
-
eval(Lq+'menuSelect'+Sq+'.left=SelX');
+
-
}
+
-
setTimeout('moveOnSelector()',speed);
+
-
  }
+
-
}
+
-
//  End -->
+
-
</script>
+
-
 
+
-
 
+
-
 
+
-
<p><center>
+
-
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
+
-
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
+
-
</center><p>
+
-
 
+
-
<!-- Script Size: 5.71 KB -->
+
-
</html>
+
  </html>

Latest revision as of 19:04, 11 September 2011

Retrieved from "http://2011.igem.org/Team:Wageningen_UR/Templates/NavigationTop"