Full version: jsB@nk » Menu » Multilevel menu » xMenu4 Vertical - Cascading menus from nested ULs
URL: https://www.javascriptbank.com/xmenu4-1-xmenu4-vertical.html
This JavaScript code will turn a set of nested ULs into a cascading dhtml menu. It is completely downgradeable. Disable JavaScript and reload the page.
Full version: jsB@nk » Menu » Multilevel menu » xMenu4 Vertical - Cascading menus from nested ULs
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