Team:Wageningen UR/Templates/NavigationTop

From 2011.igem.org

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

Revision as of 19:03, 11 September 2011

Free JavaScripts provided
by The JavaScript Source

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