Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp [ngang]
URL: https://www.javascriptbank.com/xmenu4-1-xmenu4-horizontal.html
Đây là một đoạn mã JavaScript khác để tạo một trình đơn nằm theo chiều ngang trên trang web, và mỗi khi người dùng rê con trỏ chuột đến các tùy chọn thì hiệu ứng sẽ hiển thị thêm các trình đơn con tương ứng[nếu có].
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp [ngang]
URL: https://www.javascriptbank.com/xmenu4-1-xmenu4-horizontal.html
<link rel="stylesheet" type="text/css" href="v3.css"><link rel="stylesheet" type="text/css" href="xmenu4_1.css"><link rel="stylesheet" type="text/css" href="xmenu4_1_dhtml.css"><style type="text/css">#rightColumn { overflow:visible;}.rightContent { overflow:visible;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
<script type="text/javascript" src="x_core.js"></script><script type="text/javascript" src="x_event.js"></script><script type="text/javascript" src="x_dom.js"></script><script type="text/javascript" src="xmenu4.js"></script><script type="text/javascript" src="xmenu4_1.js"></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
<ul id="myMenu1" class="xmBar" style="left: -679px; top: 108px; visibility: visible;"> <!-- Begin myMenu1 --> <!-- Menu will downgrade here --> <!-- Bar Label 1 --> <li class="xmBarLbl"><a class="myBarLblA" href="">Welcome</a> <ul class="xmBox" style="visibility: hidden; left: 4px; top: 57px;"> <li class="xmBoxLbl"><a class="myBoxLblA" href="">This Page</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 10px;"> <li class="xmBoxItm"><a href="#js">Javascript</a></li> <li class="xmBoxItm"><a href="#css">CSS</a></li> <li class="xmBoxItm"><a href="#xhtml">XHTML</a></li> </ul> </li> <!-- end 'This Page' --> <li class="xmBoxItm"><a href="">item 1-2</a></li> <li class="xmBoxLbl"><a class="myBoxLblA" href="">Support</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 54px;"> <li class="xmBoxItm"><a href="http://" title="North Alabama Web Developers">N A W D</a></li> <li class="xmBoxItm"><a href="http://">SitePoint Forums</a></li> <li class="xmBoxItm"><a href="http://">HFTOnline Forums</a></li> </ul> </li> <!-- end 'Support' --> <li class="xmBoxLbl"><a class="myBoxLblA" href="">lbl-1-2</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 76px;"> <li class="xmBoxItm"><a href="">item 1-2-1</a></li> <li class="xmBoxItm"><a href="">item 1-2-2</a></li> <li class="xmBoxLbl"><a class="myBoxLblA" href="">lbl-1-2-1</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 54px;"> <li class="xmBoxItm"><a href="">item 1-2-1-1</a></li> <li class="xmBoxItm"><a href="">item 1-2-1-2</a></li> </ul> <!-- end box-1-2-1 --> </li> <!-- end lbl-1-2-1 --> </ul> <!-- end box-1-2 --> </li> <!-- end lbl-1-2 --> </ul> <!-- end box-1 --> </li> <!-- end 'Welcome' --> <!-- Bar Label 2 --> <li class="xmBarLbl"><a class="myBarLblA" href="">More</a> <ul class="xmBox" style="left: 26px; top: 57px; visibility: hidden;"> <li class="xmBoxItm"><a href="">item 2-1</a></li> <li class="xmBoxItm"><a href="">item 2-2</a></li> <li class="xmBoxLbl"><a class="myBoxLblA" href="">lbl-2-1</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 54px;"> <li class="xmBoxItm"><a href="">item 2-1-1</a></li> <li class="xmBoxItm"><a href="">item 2-1-2</a></li> <li class="xmBoxLbl"><a class="myBoxLblA" href="">lbl-2-1-1</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 54px;"> <li class="xmBoxItm"><a href="">item 2-1-1-1</a></li> <li class="xmBoxItm"><a href="">item 2-1-1-2</a></li> </ul> <!-- end box-2-1-1 --> </li> <!-- end lbl-2-1-1 --> </ul> <!-- end box-2-1 --> </li> <!-- end lbl-2-1 --> <li class="xmBoxLbl"><a class="myBoxLblA" href="">X Demos</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 76px;"> <li class="xmBoxItm"><a href="http://cross-browser.com/x/hawk/">Hawk</a></li> <li class="xmBoxItm"><a href="http://cross-browser.com/x/examples/tooltips.html">Tooltips</a></li> <li class="xmBoxItm"><a href="http://cross-browser.com/x/examples/arrowkeys.html">Key Events</a></li> <li class="xmBoxItm"><a href="http://cross-browser.com/x/examples/slideouts.html">Slideouts</a></li> <li class="xmBoxItm"><a href="http://cross-browser.com/x/examples/drag1.html">Drag 1</a></li> </ul> </li> <!-- end 'X Demos' --> </ul> <!-- end box-2 --> </li> <!-- end 'More' --> <!-- Bar Item 1 --> <li class="xmBarItm"><a class="myBarItmA" href="http://cross-browser.com/">Home</a></li></ul> <!-- end myMenu1 --></div> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/menu/xmenu4_1/v3.csshttp://javascriptbank.com/javascript/menu/xmenu4_1/xmenu4_1.csshttp://javascriptbank.com/javascript/menu/xmenu4_1/xmenu4_1_dhtml.csshttp://javascriptbank.com/javascript/menu/xmenu4_1/x_core.jshttp://javascriptbank.com/javascript/menu/xmenu4_1/x_event.jshttp://javascriptbank.com/javascript/menu/xmenu4_1/x_dom.jshttp://javascriptbank.com/javascript/menu/xmenu4_1/xmenu4.js