Version compl�te: jsB@nk » Menu » Multilevel menu »
URL: https://www.javascriptbank.com/xcollapsible-xmenu5.html
xCollapsible permet de basculer d'un élément «affichage» de propriété quand un «déclencheur» est l'élément cliqué. Ce problème est appliqué à l'ensemble des éléments de l'élément imbriqué. Il fonctionne avec 2 HTML différentes structures. La première démonstration est faite de ULS imbriquées, et la seconde est faite de nested DIVs avec un H précédant chaque élément DIV (je l'utiliser sur certaines des principales pages de mon site). Seuls les ultrapériphériques UL (ou DIV) a besoin d'un ID. xMenu5 est une version expérimentale de la xCollapsible avec plus de fonctionnalités.
Version compl�te: jsB@nk » Menu » Multilevel menu »
URL: https://www.javascriptbank.com/xcollapsible-xmenu5.html
<LINK href="xmenu5.css" type=text/css rel=stylesheet />
<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><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>
/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