»
EnglishFrenchVietnamese

Print - MultiLevel menu with onMouseover - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » MultiLevel menu with onMouseover
URL: http://www.javascriptbank.com/multilevel-menu-with-onmouseover.html

MultiLevel menu with onMouseover © JavaScriptBank.comThis 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.

Full version: jsB@nk » Menu » Multilevel menu » MultiLevel menu with onMouseover
URL: http://www.javascriptbank.com/multilevel-menu-with-onmouseover.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->