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

In - Trình đơn nhiều cấp - JavaScriptBank.com

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

Trình đơn nhiều cấp © JavaScriptBank.comHiệu ứng tạo các trình đơn nhiều cấp lồng nhau trên trang web.

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



CSS
<LINK href="xmenu5.css" type=text/css rel=stylesheet />


JavaScript
<SCRIPT type=text/javascript>window.onload = function(){    if (window.winOnLoad) window.winOnLoad();}window.onunload = function(){    if (window.winOnUnload) window.winOnUnload();}</SCRIPT><SCRIPT src="x_core.js" type=text/javascript></SCRIPT><SCRIPT src="x_dom.js" type=text/javascript></SCRIPT><SCRIPT src="xcollapsible.js" type=text/javascript></SCRIPT><SCRIPT src="xmenu5.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript>// xMenu5/xCollapsible Demovar mnu = new Array();window.onload = function(){  mnu[0] = new xCollapsible('clpsUL1');  mnu[1] = new xMenu5('xm5', 'xMenuBtn', 'xAutoOpen');  mnu[2] = new xCollapsible('clpsDIV1', true);  mnu[3] = new xCollapsible('clpsUL2id');}window.onunload = function(){  for (var i = 0; i < mnu.length; ++i) {    mnu[i].onUnload();  }}// end demo// debugging/testing stuff not related to the xMenu5 demo:function doWalkTest(){  xWalkEleTree(xGetElementById('clpsUL1'), fnVisit);  xWalkEleTree(xGetElementById('xm5'), fnVisit);}function fnVisit(node, level, branch){  if (node.className == 'xMenuLbl' || node.nodeName == 'SPAN') {    node.innerHTML = 'Label: Branch ' + branch + ', Level ' + level;  }  else if (node.nodeName == 'A') {    node.innerHTML = 'Item: Branch ' + branch + ', Level ' + level;  }  return 1;}// debugging/testing stuff not related to the xMenu5 demo:var s;function doGenTest(){  s = '';  xGetHtml(xGetElementById('rightColumn'));  xGetElementById('dbg').value = s;}function xGetHtml(oNode, iLevel) {  if (typeof iLevel == 'undefined') iLevel = 0;  var thisName = oNode.nodeName.toLowerCase();  var oneLiner = isOneLiner(thisName);  for (var i=0; i<iLevel; ++i) s += '  ';  s += '<' + thisName;  if (oNode.id.length) s += " id='" + oNode.id + "'";  if (oNode.className.length) s += " class='" + oNode.className + "'";  s += '>';  if (!oneLiner)  s += 'n';  for (var c = oNode.firstChild; c; c = c.nextSibling) {    if (c.nodeType == 1) {      !xGetHtml(c, iLevel + 1);    }  }  if (!oneLiner) for (var i=0; i<iLevel; ++i) s += '  ';  s += '</' + thisName + '>n';}function isOneLiner(eleNodeName){  if (eleNodeName.charAt(0)=='h' && eleNodeName.length==2) {    return true;  }  switch(eleNodeName) {    case 'a':    case 'span':    case 'input':    case 'b':    case 'i':    case 'script':    case 'iframe':      return true;      break;    default:      return false;  }}</SCRIPT>


HTML
<DIV id=demoContainer><DIV id=clpsUL1Container><H2>xCollapsible - ULs #1</H2><UL class=xMenu id=clpsUL1><!-- Main Label 1 -->  <LI><!-- as a test, this newline and comment creates text and comment nodes before the span --><SPAN>Label</SPAN> <!-- as a test, this newline and comment creates text and comment nodes after the span -->  <UL>    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><SPAN>Label</SPAN>     <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><SPAN>Label</SPAN>       <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL>    <LI><SPAN>Label</SPAN>     <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><SPAN>Label</SPAN>       <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL></LI></UL><!-- end Main Label 1 --><!-- Main Label 2 -->  <LI><SPAN>Label</SPAN>   <UL>    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><SPAN>Label</SPAN>     <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><SPAN>Label</SPAN>       <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL>    <LI><SPAN>Label</SPAN>     <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><SPAN>Label</SPAN>       <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL></LI></UL><!-- end Main Label 2 --></LI></UL><!-- end clpsUL1 --></DIV><!-- end clpsUL1Container --><DIV id=xm5Container><H2>xMenu5</H2><UL class=xMenu id=xm5><!-- Main Label 1 -->  <LI><!-- as a test, this newline and comment creates text and comment nodes before the span -->  <DIV class=xMenuBtn>+</DIV>  <DIV class=xMenuLbl>Label</DIV><!-- as a test, this newline and comment creates text and comment nodes after the span -->  <UL>    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI>    <DIV class=xMenuBtn>+</DIV>    <DIV class=xMenuLbl>Label</DIV>    <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI>      <DIV class=xMenuBtn>+</DIV>      <DIV class=xMenuLbl>Label</DIV>      <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL>    <LI>    <DIV class=xMenuBtn>+</DIV>    <DIV class=xMenuLbl>Label</DIV>    <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI>      <DIV class=xMenuBtn>+</DIV>      <DIV class=xMenuLbl>Label</DIV>      <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL></LI></UL><!-- end Main Label 1 --><!-- Main Label 2 -->  <LI>  <DIV class=xMenuBtn>+</DIV>  <DIV class=xMenuLbl>Label</DIV>  <UL>    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>     <LI>    <DIV class=xMenuBtn>+</DIV>    <DIV class=xMenuLbl>Label</DIV>    <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI>      <DIV class=xMenuBtn id=xAutoOpen>+</DIV>      <DIV class=xMenuLbl>Label (xAutoOpen)</DIV>      <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL>    <LI>    <DIV class=xMenuBtn>+</DIV>    <DIV class=xMenuLbl>Label</DIV>    <UL>      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>       <LI>      <DIV class=xMenuBtn>+</DIV>      <DIV class=xMenuLbl>Label</DIV>      <UL>        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A>         </LI></UL></LI></UL></LI></UL><!-- end Main Label 2 --></LI></UL><!-- end xm5 --></DIV><!-- end xm5Container --></DIV>


Files
/javascript/menu/xCollapsible__xMenu5/xmenu5.css/javascript/menu/xCollapsible__xMenu5/x_core.js/javascript/menu/xCollapsible__xMenu5/x_dom.js/javascript/menu/xCollapsible__xMenu5/xcollapsible.js/javascript/menu/xCollapsible__xMenu5/xmenu5.js