Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp [dọc]
URL: https://www.javascriptbank.com/xmenu4-1-xmenu4-vertical.html
![Menu nhiều cấp [dọc] © JavaScriptBank.com](/javascript.images/menu/xmenu4-1-xmenu4-vertical.jpg)
Đây là một đoạn mã JavaScript khác để tạo một trình đơn nằm theo chiều dọc 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 [dọc]
URL: https://www.javascriptbank.com/xmenu4-1-xmenu4-vertical.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">/* over-ride some rules from xmenu4_1_dhtml.css */#rightColumn { overflow:visible;}.rightContent { overflow:visible;}ul.xmBar li { list-style:none; display:block; margin:0 0 6px 0; padding:0px;}#menuMarker { /* menu will be positioned at this element */ display:block; position:relative; overflow:hidden; margin:0 0px 80px 0px; padding:0; background:transparent;}</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: 76px; top: 4px;"> <li class="xmBoxLbl"><a class="myBoxLblA" href="">his Page</a> <ul class="xmBox" style="visibility: hidden; left: 129px; top: 4px;"> <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: 48px;"> <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: 70px;"> <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: 48px;"> <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: 76px; top: 28px; 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: 48px;"> <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: 48px;"> <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: 70px;"> <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