»
EnglishFrenchVietnamese

Print - xMenu4 Vertical - Cascading menus from nested ULs - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » xMenu4 Vertical - Cascading menus from nested ULs
URL: http://www.javascriptbank.com/xmenu4-1-xmenu4-vertical.html

xMenu4 Vertical - Cascading menus from nested ULs © JavaScriptBank.comThis 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: http://www.javascriptbank.com/xmenu4-1-xmenu4-vertical.html



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


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


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


Files
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