»
Tiếng AnhTiếng PhápTiếng Việt

In - Menu nhiều cấp - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp
URL: https://www.javascriptbank.com/multilevel-menu-with-onmouseover.html

Menu nhiều cấp © JavaScriptBank.comMột đoạn mã JavaScript khác để tạo một trình đơn nhiều cấp trên trang web. Nhưng trong hiệu ứng JavaScript này, bạn có thể hiển thị/ẩn đồng loạt các mục chọn con chỉ bằng một cú nhấn chuột.

Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp
URL: https://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-->