<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- voorbeeld van een menu -->
<title>Schuifmenu</title>
<style>
body {
font-family:arial;
}
a {
color:black;
text-decoration:none;
font:bold
}
a:hover {
color:black;
text-decoration:underline;
}
}
td.menu {
background:lightblue
}
td.menu:hover {background-Color="FF9933"
}
table.navigatie {
background:black;
position:relative;
font:bold 80%;
top:-119px;
left:0px;
}
</style>
<script>
var pos = -119;
var timer1 = 0;
var timer2 = 0;;
var stap = 3;
function toonMenu1() {
// stop functie verberg en start functie toon
clearInterval(timer1)
timer2 = setInterval("toon1()",10)
} // einde toonMenu
function verbergMenu1() {
// stop functie toon en start functie verberg
clearInterval(timer2)
timer1 = setInterval("verberg1()",10)
} //einde verbergMenu
function toon1(){
if (pos < -12) {
pos = pos + stap
document.getElementById('mijnMenu1').style.top = pos
} // einde if
} // einde toon
function verberg1(){
if (pos > -119) {
pos = pos -stap
document.getElementById('mijnMenu1').style.top = pos
} // einde if
} // einde verberg
var pos2 = -119;
var timer3 = 0;
var timer4 = 0;;
var stap = 3;
function toonMenu2() {
// stop functie verberg en start functie toon
clearInterval(timer3)
timer4 = setInterval("toon2()",10)
} // einde toonMenu
function verbergMenu2() {
// stop functie toon en start functie verberg
clearInterval(timer4)
timer3 = setInterval("verberg2()",10)
} //einde verbergMenu
function toon2(){
if (pos2 < -12) {
pos2 = pos2 + stap
document.getElementById('mijnMenu2').style.top = pos2
} // einde if
} // einde toon
function verberg2(){
if (pos2 > -119) {
pos2 = pos2 -stap
document.getElementById('mijnMenu2').style.top = pos2
} // einde if
} // einde verberg
var pos3 = -119;
var timer5 = 0;
var timer6 = 0;;
var stap = 3;
function toonMenu3() {
// stop functie verberg en start functie toon
clearInterval(timer5)
timer6 = setInterval("toon3()",10)
} // einde toonMenu
function verbergMenu3() {
// stop functie toon en start functie verberg
clearInterval(timer6)
timer5 = setInterval("verberg3()",10)
} //einde verbergMenu
function toon3(){
if (pos3 < -12) {
pos3 = pos3 + stap
document.getElementById('mijnMenu3').style.top = pos3
} // einde if
} // einde toon
function verberg3(){
if (pos3 > -119) {
pos3 = pos3 -stap
document.getElementById('mijnMenu3').style.top = pos3
} // einde if
} // einde verberg
</script>
</head>
<body>
<table border="0" width="1057" height="85">
<tr>
<td height="112" width="152">
<table style="width: 152px; height: 122px;" id="mijnmenu1" class="navigatie" onMouseOver="toonMenu1()" onMouseOut="verbergMenu1()">
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item1</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item2</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item3</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item4</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item5</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #004466" height="18">
<font color="#FFFFFF">menu1</font></td>
</tr>
</table>
</td>
<td height="112" width="152">
<table style="width: 152px; height: 122px;" id="mijnmenu2" class="navigatie" onMouseOver="toonMenu2()" onMouseOut="verbergMenu2()">
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item1</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item2</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item3</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item4</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item5</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #004466" height="18">
<font color="#FFFFFF">menu2</font></td>
</tr>
</table>
</td>
<td height="112" width="152">
<table style="width: 152px; height: 122px;" id="mijnmenu3" class="navigatie" onMouseOver="toonMenu3()" onMouseOut="verbergMenu3()">
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item1</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item2</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item3</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item4</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #FFFFFF">
<a href="http://alexj.to.md/">menu item5</a></td>
</tr>
<tr>
<td class="menu" style="background-color: #004466" height="18">
<font color="#FFFFFF">menu3</font></td>
</tr>
</table>
</td>
<td height="112" width="583">
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p>move down menu by alexj</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<br>
<p>
</p>
<br>
<p>
</p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>