« »

This is a beautiful menu. I did a lot of work to make it, so please send me the URL of the page where you placed the menu.

Label: Move-Down Menu

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE>BODY {
	FONT-FAMILY: arial
}
A {
	FONT-WEIGHT: bold; COLOR: black; TEXT-DECORATION: none
}
A:hover {
	COLOR: black; TEXT-DECORATION: underline
}
TD.menu {
	BACKGROUND: lightblue
}
TD.menu:hover {
	BACKGROUND-COLOR: #ff9933
}
TABLE.navigatie {
	FONT-WEIGHT: bold; FONT-SIZE: 80%; BACKGROUND: black; LEFT: 0px; LINE-HEIGHT: normal; FONT-STYLE: normal; POSITION: relative; TOP: -119px; FONT-VARIANT: normal
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT>
// author: Alex Jeurissen
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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<TABLE height=85 width=1057 border=0>
  <TBODY>
  <TR>
    <TD width=152 height=112>
      <TABLE class=navigatie id=mijnmenu1 onmouseover=toonMenu1() 
      style="WIDTH: 152px; HEIGHT: 122px" onmouseout=verbergMenu1()>
        <TBODY>
        <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></TBODY></TABLE></TD>
    <TD width=152 height=112>
      <TABLE class=navigatie id=mijnmenu2 onmouseover=toonMenu2() 
      style="WIDTH: 152px; HEIGHT: 122px" onmouseout=verbergMenu2()>
        <TBODY>
        <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></TBODY></TABLE></TD>
    <TD width=152 height=112>
      <TABLE class=navigatie id=mijnmenu3 onmouseover=toonMenu3() 
      style="WIDTH: 152px; HEIGHT: 122px" onmouseout=verbergMenu3()>
        <TBODY>
        <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></TBODY></TABLE></TD>
    <TD width=583 height=112>&nbsp;</TD></TR></TBODY></TABLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->