|
From: Philippe O. <pom...@us...> - 2005-05-15 23:44:17
|
Update of /cvsroot/easystruts/easystruts-website/lib/x-cbe/x3151_cbe4191_z4/cross-browser.com/x/menus In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv435/lib/x-cbe/x3151_cbe4191_z4/cross-browser.com/x/menus Added Files: xmenu4_2.html xmenu4.js xmenu4_1.js xmenu4_1.html xmenu4_2.js xmenu4_1.css xmenu4_1_dhtml.css Log Message: Added new web site sources and data --- NEW FILE: xmenu4_2.js --- // xmenu4_2.js // xMenu4 Demo 2, Cascading menus from nested ULs! // Copyright (c) 2002,2003 Michael Foster (mi...@cr...) // This code is distributed under the terms of the LGPL (gnu.org) ////--- Loader if (!xIE4 && !xNN4) { xInclude('../x_core.js', '../x_event.js', '../x_dom.js', 'xmenu4.js', 'xmenu4_1_dhtml.css'); window.onload = xOnload; } ////--- Load Event Listener function xOnload() { var me = xGetElementById('myMenu1'); if (!xDef(me.nodeName, me.firstChild, me.nextSibling)) { return; } var mo = new xMenu4( me, // id str or ele obj of outermost UL true, // outer UL position: true=absolute, false=static false, // main label positioning: true=horizontal, false=vertical 0, 1, // box horizontal and vertical offsets [-3, -10, -6, -10], // lbl focus clip array [-30, null, null, null], // box focus clip array // css class names: 'xmBar', 'xmBox', 'xmBarLbl', 'xmBarLblHvr', 'xmBarItm', 'xmBarItmHvr', 'xmBoxLbl', 'xmBoxLblHvr', 'xmBoxItm', 'xmBoxItmHvr' ); xMnuMgr.add(mo); xMnuMgr.load(); xmWinOnResize(); xAddEventListener(window, 'resize', xmWinOnResize, false); } ////--- Window Resize Event Listener function xmWinOnResize() { // !!! var me = xMnuMgr.activeMenu.ele; var rc = xGetElementById('rightColumn'); var mm = xGetElementById('menuMarker'); var mmp = xParent(mm); xMoveTo(me, xPageX(mmp)-xPageX(rc), xPageY(mmp)-xPageY(rc)); xMnuMgr.paint(); } --- NEW FILE: xmenu4_1_dhtml.css --- /* xmenu4_1_dhtml.css xMenu4 Demo 1, Cascading menus from nested ULs! This code is distributed under the terms of the LGPL (gnu.org) Mike Foster, Cross-Browser.com */ /* xMenu4 DHTML Rules (see xmenu4_1.css for downgrade rules) */ /* Bar */ /* Outermost UL (horizontal bar) */ ul.xmBar { position:absolute; visibility:hidden; margin:0; padding:4px; background:transparent; overflow:visible; cursor:default; } /* All LIs in ul.xmBar */ ul.xmBar li { list-style:none; display:inline; width:70px; margin:0 8px 0 0; padding:2px 6px; } /* Bar label */ li.xmBarLbl { color:#000; background:#cc9; border-left:1px solid #996; border-top:1px solid #996; border-right:1px solid #330; border-bottom:1px solid #330; } li.xmBarLblHvr { color:#fff; background:#996; border-left:1px solid #330; border-top:1px solid #330; border-right:1px solid #996; border-bottom:1px solid #996; } /* Bar item */ li.xmBarItm { color:#000; background:#cc9; border-left:1px solid #996; border-top:1px solid #996; border-right:1px solid #330; border-bottom:1px solid #330; } li.xmBarItmHvr { color:#fff; background:#996; border-left:1px solid #330; border-top:1px solid #330; border-right:1px solid #996; border-bottom:1px solid #996; } /* Box */ /* All ULs except outermost */ ul.xmBox { position:absolute; visibility:hidden; display:block; width:124px; margin:0; padding:4px; overflow:visible; cursor:default; background:#cc9; border-left:1px solid #996; border-top:1px solid #996; border-right:1px solid #330; border-bottom:1px solid #330; } /* All LIs in ul.xmBox */ ul.xmBox li { display:block; margin:6px 0; padding:0; width:124px; height:auto /* 16px; */ } /* Box label */ li.xmBoxLbl { color:#000; background:transparent; border-right:1px solid #330; } li.xmBoxLblHvr { color:#fff; background:#996; border-right:1px solid #660; } /* Box item */ li.xmBoxItm { color:#000; background:transparent; } li.xmBoxItmHvr { color:#fff; background:#996; } /* A element over-rides so we don't inherit unwanted styles */ ul.xmBar li a:link, ul.xmBar li a:visited, ul.xmBar li a:active { /* for all As in ul.xmBar */ display:inline; margin:0; padding:0; border:none; font-weight:normal; text-decoration:none; color:#000; background:transparent; } ul.xmBar li a:hover { /* for all As in ul.xmBar */ display:inline; margin:0; padding:0; border:none; font-weight:normal; text-decoration:none; color:#fff; background:transparent; } ul.xmBox li a:link, ul.xmBox li a:visited, ul.xmBox li a:active { /* for all As in ul.xmBox */ display:block; /* width:100%; height:100%; */ margin:0; padding:0; border:none; font-weight:normal; text-decoration:none; color:#000; background:transparent; } ul.xmBox li a:hover { /* for all As in ul.xmBox */ display:block; /* width:100%; height:100%; */ margin:0; padding:0; border:none; font-weight:normal; text-decoration:none; color:#fff; background:transparent; } /* Misc */ #menuMarker { /* menu will be positioned at this element */ display:block; position:relative; overflow:hidden; margin:0 0px 32px 0px; padding:0; background:transparent; } --- NEW FILE: xmenu4_1.css --- /* xmenu4_1.css xMenu4 Demo 1, Cascading menus from nested ULs! This code is distributed under the terms of the LGPL (gnu.org) Mike Foster, Cross-Browser.com */ /* xMenu4 Downgrade (non-js) Styles (see xmenu4_1_dhtml.css for dhtml rules) */ /* Bar */ /* Outermost UL */ ul.myBar { background:transparent; } /* All LIs in ul.myBar */ ul.myBar li { list-style:none; margin:0; padding:0; } /* Box */ /* All ULs except outermost */ ul.myBox { background:transparent; margin:0 0 .5em 1.25em; padding:0; border-left:1px dotted #666; /* font-size:small; font-weight:normal; */ } /* All LIs in ul.myBox */ ul.myBox li { list-style:none; margin:0 0 .25em 0; padding:0; } /* Label/Item A element over-rides */ .myBarLblA { font-weight:bold; } .myBarItmA { font-weight:bold; } .myBoxLblA { font-weight:bold; } /* Misc */ #menuMarker { display:none; } --- NEW FILE: xmenu4_1.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>xMenu4 - cascading menus from nested ULs</title> <link rel='stylesheet' type='text/css' href='../../css/s6.css' /> <link rel='stylesheet' type='text/css' href='xmenu4_1.css' /> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('xmenu4_1.js', '../x_debug.js'); </script> <style type='text/css'> #rightColumn { overflow:visible; } .rightContent { overflow:visible; } </style> </head> <body> <div id='header'> <h1>Cross-Browser.com</h1> <div class='subtitle'>xMenu4 Horizontal</div> </div> <!-- end header --> <div id='leftColumn' class='column'> <!-- Begin Left Column --> <div id='menuMarker'> </div> <!-- Menu will be positioned here --> <h2>Cascading menus from nested ULs</h2> <div class='leftContent'> <h3>Intro</h3> <p><em>This is still experimental.</em> ;-)</p> <p>Also have a look at the <a href='xmenu4_2.html'>xMenu4 Vertical</a> demo.</p> <p>This code will turn a set of nested ULs into a cascading dhtml menu. It is completely downgradeable. Disable javascript and reload the page - you'll see the nested ULs with my downgrade css applied.</p> <h3>Revisions</h3> <p>2 Mar 04<br />No changes to xMenu4.js, but I moved the menu to a page with a different layout and experimented with a few things - so it may be a little <i>less</i> cross-browser right now. There's plenty of tweaking that could still be done - but I'm tired of foolin with it for now ;-)</p> <p>v0.07, 15 Jan 04<br />Now supports vertical positioning of main labels. Special thanks to <a href='http://www.hftonline.com/forum/showthread.php?s=&threadid=14063'>Chris</a> for helping with this.</p> <p>v0.06, 3 Nov 03<br />Many improvements this time - rewrote the css and changed some menu code; found an Opera7 bug (130324); IE6's css-support gave me headaches.</p> <p>v0.05, 27 Oct 03<br />Separated css and js into two files each. Tweaked css. The menu code now applies the styles on load, so the inline class names can be for downgrade mode. Improved downgrade styles - disable js and reload page to see it. Much remains to be done.</p> <p>v0.04, 25 Oct 03<br />More tweaks. As a test I moved the UL to several different places in the html. It is now in one of the content DIVs.</p> <p>v0.03, 24 Oct 03<br />Improved event handling and tweaked over-all design.</p> <p>v0.02, 23 Oct 03<br />I rewrote the event handling and added A elements in each label element.</p> </div> <!-- end leftContent --> <h2 id='js' >Javascript</h2> <div class='leftContent'> <p>The js is in two files. One is for page-related js - the loader and onload listener, the other is the menu system code.</p> <p><a href='xmenu4.js'>xmenu4.js</a> - the menu system, don't rename this file.</p> <p><a href='xmenu4_1.js'>xmenu4_1.js</a> - your page onload code, rename this to 'myPage.js'. The contents of this file follow.</p> <pre> ////--- Loader if (!xIE4 && !xNN4) { xInclude('../x_core.js', '../x_event.js', '../x_dom.js', 'xmenu4.js', 'xmenu4_1_dhtml.css'); window.onload = xOnload; } ////--- Load Event Listener function xOnload() { var me = xGetElementById('myMenu1'); if (!xDef(me.nodeName, me.firstChild, me.nextSibling)) { return; } var mo = new xMenu4( me, // id str or ele obj of outermost UL true, // outer UL position: true=absolute, false=static true, // main label positioning: true=horizontal, false=vertical 0, 1, // box horizontal and vertical offsets [-3, -10, -6, -10], // lbl focus clip array [-30, null, null, null], // box focus clip array // css class names: 'xmBar', 'xmBox', 'xmBarLbl', 'xmBarLblHvr', 'xmBarItm', 'xmBarItmHvr', 'xmBoxLbl', 'xmBoxLblHvr', 'xmBoxItm', 'xmBoxItmHvr' ); xMnuMgr.add(mo); xMnuMgr.load(); xmWinOnResize(); xAddEventListener(window, 'resize', xmWinOnResize, false); } ////--- Window Resize Event Listener function xmWinOnResize() { // !!! var me = xMnuMgr.activeMenu.ele; var rc = xGetElementById('rightColumn'); var mm = xGetElementById('menuMarker'); var mmp = xParent(mm); xMoveTo(me, xPageX(mmp)-xPageX(rc), xPageY(mmp)-xPageY(rc)); xMnuMgr.paint(); } </pre> </div> <!-- end leftContent --> <h2 id='css'>CSS</h2> <div class='leftContent'> <p>The css is in two files. One supplies default and downgrade mode styles, the other supplies dhtml-related style rules.</p> <p><a href='xmenu4_1.css'>xmenu4_1.css</a> - default and downgrade styles, rename this to 'myPage.css'.</p> <p><a href='xmenu4_1_dhtml.css'>xmenu4_1_dhtml.css</a> - dhtml-related styles, rename this to 'myPage_dhtml.css'.</p> </div> <!-- end leftContent --> <h2 id='xhtml'>XHTML</h2> <div class='leftContent'> <p>No IDs are required, except for the outermost UL. The inline class names are for downgrade mode. Non-downgrade mode class names are passed to the menu object constructor. When Javascript and/or CSS are disabled the menu downgrades to standard nested ULs.</p> <pre> <ul id='myMenu1' class='myBar'> <!-- Begin myMenu1 --> <!-- Bar Label 1 --> <li><a class='myBarLblA' href=''>lbl-1</a> <ul class='myBox'> <li><a href=''>item 1-1</a></li> <li><a href=''>item 1-2</a></li> <li><a class='myBoxLblA' href=''>lbl-1-1</a> <ul class='myBox'> <li><a href=''>item 1-1-1</a></li> <li><a href=''>item 1-1-2</a></li> </ul> <!-- end box-1-1 --> </li> <!-- end lbl-1-1 --> <li><a class='myBoxLblA' href=''>lbl-1-2</a> <ul class='myBox'> <li><a href=''>item 1-2-1</a></li> <li><a href=''>item 1-2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-1-2-1</a> <ul class='myBox'> <li><a href=''>item 1-2-1-1</a></li> <li><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 lbl-1 --> <!-- Bar Label 2 --> <li><a class='myBarLblA' href=''>lbl-2</a> <ul class='myBox'> <li><a href=''>item 2-1</a></li> <li><a href=''>item 2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1</a></li> <li><a href=''>item 2-1-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1-1</a></li> <li><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><a class='myBoxLblA' href=''>lbl-2-2</a> <ul class='myBox'> <li><a href=''>item 2-2-1</a></li> <li><a href=''>item 2-2-2</a></li> </ul> <!-- end lbl-2-2 --> </li> <!-- end box-2-2 --> </ul> <!-- end box-2 --> </li> <!-- end lbl-2 --> <!-- Bar Item 1 --> <li><a class='myBarItmA' href=''>item-1</a></li> </ul> <!-- end myMenu1 --> </pre> </div> <!-- end leftContent --> <div class='leftContent'> <a href='http://cross-browser.com/'>Cross-Browser.com</a> - DHTML libraries and applications. </div> <!-- end leftContent --> </div> <!-- end leftColumn --> <div id='rightColumn' class='column'> <!-- Begin Right Column --> <div class='rightContent'> <ul id='myMenu1' class='myBar'> <!-- Begin myMenu1 --> <!-- Menu will downgrade here --> <!-- Bar Label 1 --> <li><a class='myBarLblA' href=''>Welcome</a> <ul class='myBox'> <li><a class='myBoxLblA' href=''>This Page</a> <ul class='myBox'> <li><a href='#js'>Javascript</a></li> <li><a href='#css'>CSS</a></li> <li><a href='#xhtml'>XHTML</a></li> </ul> </li> <!-- end 'This Page' --> <li><a href=''>item 1-2</a></li> <li><a class='myBoxLblA' href=''>Support</a> <ul class='myBox'> <li><a href='http://www.sitepointforums.com/forumdisplay.php?forumid=15'>SitePoint Forums</a></li> <li><a href='http://www.hftonline.com/forum/forumdisplay.php?forumid=16'>HFTOnline Forums</a></li> </ul> </li> <!-- end 'Support' --> <li><a class='myBoxLblA' href=''>lbl-1-2</a> <ul class='myBox'> <li><a href=''>item 1-2-1</a></li> <li><a href=''>item 1-2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-1-2-1</a> <ul class='myBox'> <li><a href=''>item 1-2-1-1</a></li> <li><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><a class='myBarLblA' href=''>More</a> <ul class='myBox'> <li><a href=''>item 2-1</a></li> <li><a href=''>item 2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1</a></li> <li><a href=''>item 2-1-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1-1</a></li> <li><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><a class='myBoxLblA' href=''>X Demos</a> <ul class='myBox'> <li><a href='http://cross-browser.com/x/hawk/'>Hawk</a></li> <li><a href='http://cross-browser.com/x/examples/tooltips.html'>Tooltips</a></li> <li><a href='http://cross-browser.com/x/examples/arrowkeys.html'>Key Events</a></li> <li><a href='http://cross-browser.com/x/examples/slideouts.html'>Slideouts</a></li> <li><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><a class='myBarItmA' href='http://cross-browser.com/'>Home</a></li> </ul> <!-- end myMenu1 --> </div> <!-- end rightContent --> <div class='rightContent'> <h3>More</h3> <p>For more dhtml toys visit <a href='http://cross-browser.com/'>Cross-Browser.com</a></p> <p>By your use of X and xMenu4 you consent to the LGPL License. Please <a href='../../license.html'>read it</a>.</p> <h3>Support</h3> <p>Myself and other DHTML developers offer free support at the following forums. I hope you visit us.</p> <p><a href='http://www.sitepoint.com/forums/forumdisplay.php?f=15'>SitePoint Javascript Forum</a></p> <p><a href='http://www.hftonline.com/forum/forumdisplay.php?forumid=16'>HFTOnline Webmastering Forum</a></p> </div> <!-- end rightContent --> </div> <!-- end rightColumn --> </body> </html> --- NEW FILE: xmenu4_2.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>xMenu4 - cascading menus from nested ULs</title> <link rel='stylesheet' type='text/css' href='../../css/s6.css' /> <link rel='stylesheet' type='text/css' href='xmenu4_1.css' /> <script type='text/javascript' src='../x_load.js'></script> <script type='text/javascript'> xInclude('xmenu4_2.js', '../x_debug.js'); </script> <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> </head> <body> <div id='header'> <h1>Cross-Browser.com</h1> <div class='subtitle'>xMenu4 Vertical</div> </div> <!-- end header --> <div id='leftColumn' class='column'> <!-- Begin Left Column --> <div id='menuMarker'> </div> <!-- Menu will be positioned here --> <h2>Cascading menus from nested ULs</h2> <div class='leftContent'> <h3>Intro</h3> <p><em>This is still experimental.</em> ;-)</p> <p>Also have a look at the <a href='xmenu4_1.html'>xMenu4 Horizontal</a> demo.</p> <p>This code will turn a set of nested ULs into a cascading dhtml menu. It is completely downgradeable. Disable javascript and reload the page - you'll see the nested ULs with my downgrade css applied.</p> <h3>Revisions</h3> <p>2 Mar 04<br />No changes to xMenu4.js, but I moved the menu to a page with a different layout and experimented with a few things - so it may be a little <i>less</i> cross-browser right now. There's plenty of tweaking that could still be done - but I'm tired of foolin with it for now ;-)</p> <p>See the horizontal demo for more revision info.</p> </div> <!-- end leftContent --> <h2 id='js' >Javascript</h2> <div class='leftContent'> <p>The js is in two files. One is for page-related js - the loader and onload listener, the other is the menu system code.</p> <p><a href='xmenu4.js'>xmenu4.js</a> - the menu system, don't rename this file.</p> <p><a href='xmenu4_2.js'>xmenu4_2.js</a> - your page onload code, rename this to 'myPage.js'. The contents of this file follow.</p> <pre> ////--- Loader if (!xIE4 && !xNN4) { xInclude('../x_core.js', '../x_event.js', '../x_dom.js', 'xmenu4.js', 'xmenu4_1_dhtml.css'); window.onload = xOnload; } ////--- Load Event Listener function xOnload() { var me = xGetElementById('myMenu1'); if (!xDef(me.nodeName, me.firstChild, me.nextSibling)) { return; } var mo = new xMenu4( me, // id str or ele obj of outermost UL true, // outer UL position: true=absolute, false=static false, // main label positioning: true=horizontal, false=vertical 0, 1, // box horizontal and vertical offsets [-3, -10, -6, -10], // lbl focus clip array [-30, null, null, null], // box focus clip array // css class names: 'xmBar', 'xmBox', 'xmBarLbl', 'xmBarLblHvr', 'xmBarItm', 'xmBarItmHvr', 'xmBoxLbl', 'xmBoxLblHvr', 'xmBoxItm', 'xmBoxItmHvr' ); xMnuMgr.add(mo); xMnuMgr.load(); xmWinOnResize(); xAddEventListener(window, 'resize', xmWinOnResize, false); } ////--- Window Resize Event Listener function xmWinOnResize() { // !!! var me = xMnuMgr.activeMenu.ele; var rc = xGetElementById('rightColumn'); var mm = xGetElementById('menuMarker'); var mmp = xParent(mm); xMoveTo(me, xPageX(mmp)-xPageX(rc), xPageY(mmp)-xPageY(rc)); xMnuMgr.paint(); } </pre> </div> <!-- end leftContent --> <h2 id='css'>CSS</h2> <div class='leftContent'> <p>The css is in two files. One supplies default and downgrade mode styles, the other supplies dhtml-related style rules.</p> <p><a href='xmenu4_1.css'>xmenu4_1.css</a> - default and downgrade styles, rename this to 'myPage.css'.</p> <p><a href='xmenu4_1_dhtml.css'>xmenu4_1_dhtml.css</a> - dhtml-related styles, rename this to 'myPage_dhtml.css'.</p> </div> <!-- end leftContent --> <h2 id='xhtml'>XHTML</h2> <div class='leftContent'> <p>No IDs are required, except for the outermost UL. The inline class names are for downgrade mode. Non-downgrade mode class names are passed to the menu object constructor. When Javascript and/or CSS are disabled the menu downgrades to standard nested ULs.</p> <pre> <ul id='myMenu1' class='myBar'> <!-- Begin myMenu1 --> <!-- Bar Label 1 --> <li><a class='myBarLblA' href=''>lbl-1</a> <ul class='myBox'> <li><a href=''>item 1-1</a></li> <li><a href=''>item 1-2</a></li> <li><a class='myBoxLblA' href=''>lbl-1-1</a> <ul class='myBox'> <li><a href=''>item 1-1-1</a></li> <li><a href=''>item 1-1-2</a></li> </ul> <!-- end box-1-1 --> </li> <!-- end lbl-1-1 --> <li><a class='myBoxLblA' href=''>lbl-1-2</a> <ul class='myBox'> <li><a href=''>item 1-2-1</a></li> <li><a href=''>item 1-2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-1-2-1</a> <ul class='myBox'> <li><a href=''>item 1-2-1-1</a></li> <li><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 lbl-1 --> <!-- Bar Label 2 --> <li><a class='myBarLblA' href=''>lbl-2</a> <ul class='myBox'> <li><a href=''>item 2-1</a></li> <li><a href=''>item 2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1</a></li> <li><a href=''>item 2-1-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1-1</a></li> <li><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><a class='myBoxLblA' href=''>lbl-2-2</a> <ul class='myBox'> <li><a href=''>item 2-2-1</a></li> <li><a href=''>item 2-2-2</a></li> </ul> <!-- end lbl-2-2 --> </li> <!-- end box-2-2 --> </ul> <!-- end box-2 --> </li> <!-- end lbl-2 --> <!-- Bar Item 1 --> <li><a class='myBarItmA' href=''>item-1</a></li> </ul> <!-- end myMenu1 --> </pre> </div> <!-- end leftContent --> <div class='leftContent'> <a href='http://cross-browser.com/'>Cross-Browser.com</a> - DHTML libraries and applications. </div> <!-- end leftContent --> </div> <!-- end leftColumn --> <div id='rightColumn' class='column'> <!-- Begin Right Column --> <div class='rightContent'> <ul id='myMenu1' class='myBar'> <!-- Begin myMenu1 --> <!-- Menu will downgrade here --> <!-- Bar Label 1 --> <li><a class='myBarLblA' href=''>Welcome</a> <ul class='myBox'> <li><a class='myBoxLblA' href=''>This Page</a> <ul class='myBox'> <li><a href='#js'>Javascript</a></li> <li><a href='#css'>CSS</a></li> <li><a href='#xhtml'>XHTML</a></li> </ul> </li> <!-- end 'This Page' --> <li><a href=''>item 1-2</a></li> <li><a class='myBoxLblA' href=''>Support</a> <ul class='myBox'> <li><a href='http://www.sitepointforums.com/forumdisplay.php?forumid=15'>SitePoint Forums</a></li> <li><a href='http://www.hftonline.com/forum/forumdisplay.php?forumid=16'>HFTOnline Forums</a></li> </ul> </li> <!-- end 'Support' --> <li><a class='myBoxLblA' href=''>lbl-1-2</a> <ul class='myBox'> <li><a href=''>item 1-2-1</a></li> <li><a href=''>item 1-2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-1-2-1</a> <ul class='myBox'> <li><a href=''>item 1-2-1-1</a></li> <li><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><a class='myBarLblA' href=''>More</a> <ul class='myBox'> <li><a href=''>item 2-1</a></li> <li><a href=''>item 2-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1</a></li> <li><a href=''>item 2-1-2</a></li> <li><a class='myBoxLblA' href=''>lbl-2-1-1</a> <ul class='myBox'> <li><a href=''>item 2-1-1-1</a></li> <li><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><a class='myBoxLblA' href=''>X Demos</a> <ul class='myBox'> <li><a href='http://cross-browser.com/x/hawk/'>Hawk</a></li> <li><a href='http://cross-browser.com/x/examples/tooltips.html'>Tooltips</a></li> <li><a href='http://cross-browser.com/x/examples/arrowkeys.html'>Key Events</a></li> <li><a href='http://cross-browser.com/x/examples/slideouts.html'>Slideouts</a></li> <li><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><a class='myBarItmA' href='http://cross-browser.com/'>Home</a></li> </ul> <!-- end myMenu1 --> </div> <!-- end rightContent --> <div class='rightContent'> <h3>More</h3> <p>For more dhtml toys visit <a href='http://cross-browser.com/'>Cross-Browser.com</a></p> <p>By your use of X and xMenu4 you consent to the LGPL License. Please <a href='../../license.html'>read it</a>.</p> <h3>Support</h3> <p>Myself and other DHTML developers offer free support at the following forums. I hope you visit us.</p> <p><a href='http://www.sitepoint.com/forums/forumdisplay.php?f=15'>SitePoint Javascript Forum</a></p> <p><a href='http://www.hftonline.com/forum/forumdisplay.php?forumid=16'>HFTOnline Webmastering Forum</a></p> </div> <!-- end rightContent --> </div> <!-- end rightColumn --> </body> </html> --- NEW FILE: xmenu4_1.js --- // xmenu4_1.js // xMenu4 Demo 1, Cascading menus from nested ULs! // Copyright (c) 2002,2003 Michael Foster (mi...@cr...) // This code is distributed under the terms of the LGPL (gnu.org) ////--- Loader if (!xIE4 && !xNN4) { xInclude('../x_core.js', '../x_event.js', '../x_dom.js', 'xmenu4.js', 'xmenu4_1_dhtml.css'); window.onload = xOnload; } ////--- Load Event Listener function xOnload() { var me = xGetElementById('myMenu1'); if (!xDef(me.nodeName, me.firstChild, me.nextSibling)) { return; } var mo = new xMenu4( me, // id str or ele obj of outermost UL true, // outer UL position: true=absolute, false=static true, // main label positioning: true=horizontal, false=vertical 0, 1, // box horizontal and vertical offsets [-3, -10, -6, -10], // lbl focus clip array [-30, null, null, null], // box focus clip array // css class names: 'xmBar', 'xmBox', 'xmBarLbl', 'xmBarLblHvr', 'xmBarItm', 'xmBarItmHvr', 'xmBoxLbl', 'xmBoxLblHvr', 'xmBoxItm', 'xmBoxItmHvr' ); xMnuMgr.add(mo); xMnuMgr.load(); xmWinOnResize(); xAddEventListener(window, 'resize', xmWinOnResize, false); } ////--- Window Resize Event Listener function xmWinOnResize() { // !!! var me = xMnuMgr.activeMenu.ele; var rc = xGetElementById('rightColumn'); var mm = xGetElementById('menuMarker'); var mmp = xParent(mm); xMoveTo(me, xPageX(mmp)-xPageX(rc), xPageY(mmp)-xPageY(rc)); xMnuMgr.paint(); } --- NEW FILE: xmenu4.js --- // xmenu4.js // xMenu4 v0.07, Cascading menus from nested ULs! // Copyright (c) 2002,2003 Michael Foster (mi...@cr...) // This code is distributed under the terms of the LGPL (gnu.org) ////--- xMenuManager (not complete, basically just a stub) var xMnuMgr = new xMenuManager(); function xMenuManager() { /// Properties this.activeMenu = null; this.firstLd = true; this.menus = new Array(); /// Methods this.add = function(xm) { this.activeMenu = xm; this.menus[this.menus.length] = xm; } this.load = function() { var i; for (i=0; i<this.menus.length; ++i) { this.menus[i].load(); } if (this.firstLd) { this.firstLd = false; xAddEventListener(document, 'mousemove', xmDocOnMousemove, false); } } this.paint = function() { var i; for (i=0; i<this.menus.length; ++i) { this.menus[i].paint(); } } } // end xMenuManager object prototype ////--- Document Mousemove Event Listener function xmDocOnMousemove(oEvent) { if (xMnuMgr.activeMenu) { xMnuMgr.activeMenu.onMousemove(oEvent); } } ////--- xMenu4 Object Prototype (still experimental) function xMenu4( sULId, // id str or ele obj of outermost UL bAbsolute, // outer UL position: true=absolute, false=static bHorizontal, // main label positioning: true=horizontal, false=vertical iOfsX, iOfsY, // box horizontal and vertical offsets aLblClp, aBoxClp, // lbl and box focus clip arrays // css class names: clsBar, clsBox, // bar and box clsBarLbl, clsBarLblHvr, // bar lbl LI clsBarItm, clsBarItmHvr, // bar itm LI clsBoxLbl, clsBoxLblHvr, // box lbl LI clsBoxItm, clsBoxItmHvr) // box itm LI { /// Properties this.ele = xGetElementById(sULId); this.active = null; // active box this.item = null; // active item this.ori1 = bHorizontal ? 1 : 2; // 1==under/over, 2==right/left (not complete) this.ori2 = 2; this.abs = bAbsolute; this.ofsX = iOfsX; this.ofsY = iOfsY; this.lblClp = aLblClp; this.boxClp = aBoxClp; this.clsBar = clsBar; this.clsBox = clsBox; this.clsBarLbl = clsBarLbl; this.clsBarLblHvr = clsBarLblHvr; this.clsBarItm = clsBarItm; this.clsBarItmHvr = clsBarItmHvr; this.clsBoxLbl = clsBoxLbl; this.clsBoxLblHvr = clsBoxLblHvr; this.clsBoxItm = clsBoxItm; this.clsBoxItmHvr = clsBoxItmHvr; } // end xMenu4 object prototype ////--- xMenu4.traversePre() Pre-order traversal on ULs (and LIs if bLI) starting with oUL xMenu4.prototype.traversePre = function(oUL, sMthd, bLI, iLvl) { if (!iLvl) iLvl = 0; var isUL = oUL.nodeName.toUpperCase()=='UL'; if (bLI || isUL) { this[sMthd](oUL, iLvl); if (isUL) ++iLvl; } var c = oUL.firstChild; while (c) { if (c.nodeName.toUpperCase()=='UL' || c.nodeName.toUpperCase()=='LI') { this.traversePre(c, sMthd, bLI, iLvl); } c = c.nextSibling; } } ////--- xMenu4.load() Initialize the menu data structure xMenu4.prototype.load = function() { this.traversePre(this.ele, 'loadUL'); this.traversePre(this.ele, 'loadLI', true); } xMenu4.prototype.loadUL = function(ele, iLvl) { ele.xmLvl = iLvl; ele.isBox = true; if (iLvl == 0) { // root ul (bar) ele.xmLbl = null; } else { var li = xParent(ele,1); ele.xmLbl = li; ele.xmLbl.xmBox = ele; ele.xmLbl.isLbl = true; } } xMenu4.prototype.loadLI = function(ele, iLvl) { ele.xmLvl = iLvl; if (ele.nodeName.toUpperCase() == 'LI' && !ele.isLbl) { ele.isItm = true; } } ////--- xMenu4.paint() Apply all css then hide and position all menu boxes xMenu4.prototype.paint = function() { this.applyAllCss(); this.traversePre(this.ele, 'paintV'); } xMenu4.prototype.paintV = function(oUL, iLvl) { if (iLvl > 0) { xHide(oUL); var li = oUL.xmLbl; // xParent(oUL,1); var ori = iLvl == 1 ? this.ori1 : this.ori2; if (this.abs) { // bar UL = absolute, box UL = absolute, LI = static if (ori==1) xMoveTo(oUL, xOffsetLeft(li), xHeight(xParent(li,1)) + this.ofsY); // else if (ori==2) xMoveTo(oUL, xWidth(xParent(li,1)) + this.ofsX, xOffsetTop(li)); else if (ori==2) xMoveTo(oUL, xOffsetLeft(li) + xWidth(li) + this.ofsX, xOffsetTop(li)); } else { // bar UL = static, box UL = absolute, LI = static if (ori==1) xMoveTo(oUL, xPageX(li), xPageY(li /* xParent(li,1) */) + xHeight(li /* xParent(li,1) */) + this.ofsY); else if (ori==2) xMoveTo(oUL, xWidth(xParent(li,1)) + this.ofsX, xOffsetTop(li)); } } else xShow(oUL); } ////--- xMenu4.activate() Activate box oUL xMenu4.prototype.activate = function(oUL) { if (oUL) { if (oUL.xmLvl > 0) { this.applyLICss(oUL.xmLbl, true); xShow(oUL); } this.active = oUL; } } ////--- xMenu4.deactivate() Deactivate box oUL xMenu4.prototype.deactivate = function(oUL) { if (oUL) { if (oUL.xmLvl > 0) { xHide(oUL); this.applyLICss(oUL.xmLbl, false); } this.active = oUL.xmLvl == 1 ? null : xParent(oUL.xmLbl, 1); } } ////--- xMenu4.deactivateAll() Deactivate all boxes xMenu4.prototype.deactivateAll = function() { this.traversePre(this.ele, 'deactivate'); this.active = null; } ////--- xMenu4.applyAllCss() xMenu4.prototype.applyAllCss = function() { this.traversePre(this.ele, 'applyAllCssV', true); } xMenu4.prototype.applyAllCssV = function(ele) { if (ele.isBox) this.applyULCss(ele); else this.applyLICss(ele); } ////--- xMenu4.applyULCss() xMenu4.prototype.applyULCss = function(oUL) { if (oUL && xStr(oUL.className)) { if (oUL.xmLvl == 0) { // bar oUL.className = this.clsBar; } else { // box oUL.className = this.clsBox; } } } ////--- xMenu4.applyLICss() xMenu4.prototype.applyLICss = function(oLI, bActive) { if (oLI && oLI.xmLvl > 0 && xStr(oLI.className)) { if (bActive) { // active state if (oLI.xmLvl == 1) { oLI.className = oLI.isLbl ? this.clsBarLblHvr : this.clsBarItmHvr; } else { oLI.className = oLI.isLbl ? this.clsBoxLblHvr : this.clsBoxItmHvr; } } else { // inactive state if (oLI.xmLvl == 1) { oLI.className = oLI.isLbl ? this.clsBarLbl : this.clsBarItm; } else { oLI.className = oLI.isLbl ? this.clsBoxLbl : this.clsBoxItm; } } // end else inactive state } } ////--- xMenu4.onMousemove() Handle all user interaction xMenu4.prototype.onMousemove = function(oEvent) { var evt = new xEvent(oEvent); var ele = evt.target; while (ele && !ele.isLbl && !ele.isBox && !ele.isItm) { ele = xParent(ele,1); } if (!ele) { // not on lbl nor box nor itm if ( this.active && !xHasPoint(this.active, evt.pageX, evt.pageY, this.boxClp[0], this.boxClp[1], this.boxClp[2], this.boxClp[3]) ) { this.deactivateAll(); } } else if (ele.isLbl) { // on lbl if (ele.xmBox != this.active) { if (this.active && xParent(ele,1) != this.active) { this.deactivate(this.active); } else { this.activate(ele.xmBox); } } } else if (ele.isBox || ele.isItm) { // on box or itm var box = ele; if (ele.isItm) box = xParent(ele,1); if (this.active && /* box.xmLvl > 0 && */ box != this.active) { if ( // if not going from lbl to box !xHasPoint(this.active.xmLbl, evt.pageX, evt.pageY, this.lblClp[0], this.lblClp[1], this.lblClp[2], this.lblClp[3]) // The following line shouldn't be needed, but in Opera it seems that sometimes // when you move the mouse fast the target and coord properties are out of sync... ? && !xHasPoint(this.active, evt.pageX, evt.pageY, 0, null, null, null) ) { this.deactivate(this.active); } } } if (ele && ele.isItm) { // on itm if (ele != this.item) { if (this.item) { this.applyLICss(this.item, false); } this.applyLICss(ele, true); this.item = ele; } } else if (this.item) { // not ele or not on itm this.applyLICss(this.item, false); this.item = null; } /* window.status = 'Menu[ele: ' + xName(ele) + ', aLbl: ' + (this.active ? xName(this.active.xmLbl):'null') + '(' + (this.active ? (xPageX(this.active.xmLbl)+','+xPageY(this.active.xmLbl)):'') + '), aBox: ' + xName(this.active) + '(' + (this.active ? (xPageX(this.active)+','+xPageY(this.active)):'') + ')' + (ele && ele.isItm ? ' isItm' : (ele && ele.isLbl ? ' isLbl' : (ele && ele.isBox ? ' isBox' : ''))) + (ele && xNum(ele.xmLvl) ? ', ' + ele.xmLvl:'') + ']' + ' Mouse[xy: ' + evt.pageX + ':' + evt.pageY + ', ele: ' + xName(evt.target) + '(' + xPageX(evt.target) + ',' + xPageY(evt.target) + ')]'; */ } // end xMenu4.onMousemove() ////--- dbgMsg() var firstDbgMsg = true; function dbgMsg(msg) { if (firstDbgMsg) { firstDbgMsg = false; xGetElementById('dbg').innerHTML = '<p>' + msg + '</p>'; } else { xGetElementById('dbg').innerHTML += '<p>' + msg + '</p>'; } } // end xMenu4.js |
