« »

This JavaScript code creates the two level menus on your web page. Everytime you move mouse over it, the sub items will be displayed. And you can toggle on/off them all.

Label: MultiLevel menu with onMouseover

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css>TBODY {
	BACKGROUND-COLOR: black; DISPLAY: none; WIDTH: 100px
}
THEAD {
	BACKGROUND-COLOR: darkblue; COLOR: lightyellow; DISPLAY: block; FONT-WEIGHT: bold; TEXT-ALIGN: center; WIDTH: 100px
}
TR {
	WIDTH: 100px
}
TD {
	WIDTH: 100px
}
A.menu {
	COLOR: white; FONT-WEIGHT: bold; TEXT-ALIGN: center; TEXT-DECORATION: none; WIDTH: 100px
}
A.menu:hover {
	BACKGROUND-COLOR: red
}
</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 language=JavaScript type=text/javascript>
<!--
if(navigator.appName=="Netscape")
window.onload=hideit;
function hideit()
{
 document.write("Sorry, but Your Current Browser is not supported<br /> Works in Internet Explorer 5+ or Opera 7+ Internet Browser");

}
var tbodys;
function dispTrs(num)
{
 document.getElementById("body"+num).style.display="block";
}
function hideTrs(num)
{
 document.getElementById("body"+num).style.display="none";
}
//-->
</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>
  <THEAD id=head0>
  <TR>
    <TD onclick=hideTrs(0) onmouseover=dispTrs(0)>Menu 1</TD></TR></THEAD>
  <TBODY></TBODY></TABLE>
<TABLE>
  <TBODY id=body0>
  <TR>
    <TD><A class=menu href="http://JavaScriptBank.com">one</A></TD></TR>

  <TR>
    <TD><A class=menu href="http://JavaScriptBank.com">two</A></TD></TR>
  <TR>
    <TD><A class=menu 
  href="http://JavaScriptBank.com">three</A></TD></TR></TBODY></TABLE><!-- End Menu One --><!-- Menu Two -->
<TABLE>
  <THEAD id=head1>
  <TR>
    <TD onclick=hideTrs(1) onmouseover=dispTrs(1)>Menu 2</TD></TR></THEAD>

  <TBODY></TBODY></TABLE>
<TABLE>
  <TBODY id=body1>
  <TR>
    <TD><A class=menu href="http://JavaScriptBank.com">one</A></TD></TR>
  <TR>
    <TD><A class=menu href="http://JavaScriptBank.com">two</A></TD></TR>
  <TR>

    <TD><A class=menu 
  href="http://JavaScriptBank.com">three</A></TD></TR></TBODY></TABLE><!-- End Menu Two --><!-- Menu Three -->
<TABLE>
  <THEAD id=head2>
  <TR>
    <TD onclick=hideTrs(2) onmouseover=dispTrs(2)>Menu 3</TD></TR></THEAD>
  <TBODY></TBODY></TABLE>
<TABLE>
  <TBODY id=body2>
  <TR>

    <TD><A class=menu href="http://JavaScriptBank.com">one</A></TD></TR>
  <TR>
    <TD><A class=menu href="http://JavaScriptBank.com">two</A></TD></TR>
  <TR>
    <TD><A class=menu 
  href="http://JavaScriptBank.com">three</A></TD></TR></TBODY></TABLE><!-- End Menu Three --><BR>
<TABLE>
  <THEAD>
  <TR>

    <TD id=show onclick=dispTrs(0);dispTrs(1);dispTrs(2); 
    style="BACKGROUND-COLOR: darkred; FONT-SIZE: 11px">Show All</TD></TR></THEAD>
  <TBODY></TBODY></TABLE>
<TABLE>
  <THEAD>
  <TR>
    <TD id=hide onclick=hideTrs(0);hideTrs(1);hideTrs(2); 
    style="BACKGROUND-COLOR: darkred; FONT-SIZE: 11px">Hide All</TD></TR></THEAD></table>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->