Menu
▾
▴
[mxbb-commits] mx_music/phpbb2/mx_mod/mx_shared/mygosumenu/1.4 XulMenu.js, NONE, 1.1 XulMenu.txt, NONE, 1.1 example1-cache.html, NONE, 1.1 example1-cache.js, NONE, 1.1 example1.css, NONE, 1.1 example1.html, NONE, 1.1 example2.css, NONE, 1.1 example2.html, NONE, 1.1
|
From: FlorinCB <ory...@us...> - 2008-09-18 00:44:06
|
Update of /cvsroot/mxbb/mx_music/phpbb2/mx_mod/mx_shared/mygosumenu/1.4 In directory sc8-pr-cvs16.sourceforge.net:/tmp/cvs-serv19367/mx_mod/mx_shared/mygosumenu/1.4 Added Files: XulMenu.js XulMenu.txt example1-cache.html example1-cache.js example1.css example1.html example2.css example2.html Log Message: upgrade --- NEW FILE: example1-cache.js --- document.write('<table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu"><tr><td><a class="button" href="javascript:void(0)">Viewer</a><div class="section"><a class="item" href="example1.html">Home</a><a class="item" href="example1.html">Close</a></div></td><td><a class="button" href="javascript:void(0)">Articles</a><div class="section"><a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Advocacy One</a><a class="item" href="example1.html">Advocacy Two</a><a class="item" href="example1.html">Advocacy Three</a><a class="item" href="example1.html">Advocacy Four</a><a class="item" href="example1.html">Advocacy Five</a><a class="item" href="example1.html">Advocacy Six</a><a class="item" href="example1.html">Advocacy Seven</a></div><a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Guru One</a><a class="item" href="example1.html">Guru Two</a><a class="item" href="example1.html">Guru Three</a><a class="item" href="example1.html">Guru Four</a></div></div><a class="item" href="javascript:void(0)">Design<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Archive<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.hmtl">Archive One</a></div><a class="item" href="example1.html">Design One</a><a class="item" href="example1.html">Design Two</a><a class="item" href="example1.html">Design Three</a><a class="item" href="example1.html">Design Four</a><a class="item" href="example1.html">Design Five</a></div><a class="item" href="javascript:void(0)">Develop<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Develop One</a><a class="item" href="example1.html">Develop Two</a><a class="item" href="example1.html">Develop Three</a><a class="item" href="example1.html">Develop Five</a><a class="item" href="example1.html">Develop Six</a><a class="item" href="example1.html">Develop Seven</a><a class="item" href="example1.html">Develop Eight</a></div><a class="item" href="javascript:void(0)">News<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">News One</a><a class="item" href="example1.html">News Two</a><a class="item" href="example1.html">News Three</a><a class="item" href="example1.html">News Four</a></div><a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Review One</a><a class="item" href="example1.html">Review Two</a></div><a class="item" href="example1.html">File Manager</a></div></td><td><a class="button" href="javascript:void(0)">Links</a><div class="section"><a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Interview One</a><a class="item" href="example1.html">Interview Two</a><a class="item" href="example1.html">Interview Three</a><a class="item" href="example1.html">Interview Four</a><a class="item" href="example1.html">Interview Five</a><a class="item" href="example1.html">Interview Six</a><a class="item" href="example1.html">Interview Seven</a></div><a class="item" href="javascript:void(0)">PHP<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">PHP One</a><a class="item" href="example1.html">PHP Two</a><a class="item" href="example1.html">PHP Three</a></div><a class="item" href="example1.html">Advocacy One</a><a class="item" href="example1.html">Advocacy Two</a><a class="item" href="example1.html">Advocacy Three</a><a class="item" href="example1.html">Advocacy Four</a><a class="item" href="example1.html">Advocacy Five</a></div><a class="item" href="javascript:void(0)">Community<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Community One</a><a class="item" href="example1.html">Community Two</a><a class="item" href="example1.html">Community Three</a><a class="item" href="example1.html">Community Four</a><a class="item" href="example1.html">Community Five</a></div><a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Book One</a><a class="item" href="example1.html">Book Two</a><a class="item" href="example1.html">Book Three</a><a class="item" href="example1.html">Book Four</a></div><a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Pattern One</a><a class="item" href="example1.html">Pattern Two</a><a class="item" href="example1.html">Pattern Three</a><a class="item" href="example1.html">Pattern Four</a></div><a class="item" href="example1.html">Concept One</a><a class="item" href="example1.html">Concept Two</a><a class="item" href="example1.html">Concept Three</a></div><a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Introductory One</a><a class="item" href="example1.html">IIntroductory Two</a><a class="item" href="example1.html">Introductory Three</a><a class="item" href="example1.html">Introductory Four</a><a class="item" href="example1.html">Introductory Five</a><a class="item" href="example1.html">Introductory Six</a><a class="item" href="example1.html">Introductory Seven</a></div><a class="item" href="example1.html">Tutorial One</a><a class="item" href="example1.html">Tutorial Two</a><a class="item" href="example1.html">Tutorial Three</a><a class="item" href="example1.html">Tutorial Four</a><a class="item" href="example1.html">Tutorial Five</a><a class="item" href="example1.html">Tutorial Six</a><a class="item" href="example1.html">Tutorial Seven</a><a class="item" href="example1.html">Tutorial Eight</a><a class="item" href="example1.html">Tutorial Nine</a></div></div></td><td><a class="button" href="javascript:void(0)">Help</a><div class="section"><a class="item" href="example1.html">About XulMenu</a><a class="item" href="example1.html">About this site</a></div></td></tr></table>'); --- NEW FILE: example1-cache.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>#1.4 XulMenu example 1</title> <link rel="stylesheet" type="text/css" href="example1.css" /> <script type="text/javascript" src="../ie5.js"></script> <script type="text/javascript" src="XulMenu.js"></script> <style type="text/css"> body { margin: 0; padding: 0; background: #ffffff; } #bar { background: #ECE9D8; border: 1px solid; border-color: #ffffff #ACA899 #ACA899 #ffffff; padding-top: 3px; padding-bottom: 3px; cursor: default; } #menu1 { padding-left: 5px; } #search { position: absolute; top: 0; right: 5px; } #search input, #search select { font-family: georgia, tahoma, verdana; font-size: 12px; margin-top: 4px; } </style> </head> <body> <script type="text/javscript"> /* preload images */ var arrow1 = new Image(4, 7); arrow1.src = "images/arrow1.gif"; var arrow2 = new Image(4, 7); arrow2.src = "images/arrow2.gif"; </script> <div id="bar"> <script type="text/javascript" src="example1-cache.js"></script> <div id="search"> <input type="text" name="searchField" value="" /> <select name="searchWhat"><option value="">Articles</option><option value="">Links</option><option value="">PHP Manual</option></select> <input type="button" value="Search" /> </div> </div> <script type="text/javascript"> var menu1 = new XulMenu("menu1"); menu1.arrow1 = "images/arrow1.gif"; menu1.arrow2 = "images/arrow2.gif"; menu1.init(); </script> </body> </html> --- NEW FILE: example2.css --- .XulMenu { font-family: georgia, tahoma, verdana; font-size: 11px; -moz-user-select: none; } .XulMenu .button, .XulMenu .button:hover, .XulMenu .button-active, .XulMenu .button-active:hover { line-height: normal; padding: 5px 6px 4px 6px; border: 1px solid #ECE9D8; color: #000000; text-decoration: none; cursor: default; white-space: nowrap; display: block; position: relative; } .XulMenu .button:hover { border-color: #ffffff #ACA899 #ACA899 #ffffff; } .XulMenu .button-active, .XulMenu .button-active:hover { border-color: #ACA899 #ffffff #ffffff #ACA899; } .XulMenu .item, .XulMenu .item:hover, .XulMenu .item-active, .XulMenu .item-active:hover { background: #ffffff; line-height: normal; padding: 3px 30px 3px 20px; color: #000000; text-decoration: none; cursor: default; white-space: nowrap; display: block; position: relative; } .XulMenu .item:hover, .XulMenu .item-active, .XulMenu .item-active:hover { background: #316AC5; color: #ffffff; } .XulMenu .section { background: #ffffff; border: 1px solid; border-color: #F1EFE2 #716F64 #716F64 #F1EFE2; padding: 2px 1px 1px 2px; position: absolute; visibility: hidden; z-index: -1; } .XulMenu .arrow { position: absolute; top: 7px; right: 8px; border: 0; } * html .XulMenu td { position: relative; } /* ie 5.0 fix */ --- NEW FILE: example1.css --- .XulMenu { font-family: georgia, tahoma, verdana; font-size: 11px; -moz-user-select: none; } .XulMenu .button, .XulMenu .button:hover, .XulMenu .button-active, .XulMenu .button-active:hover { line-height: normal; padding: 5px 6px 4px 6px; border: 1px solid #ECE9D8; color: #000000; text-decoration: none; cursor: default; white-space: nowrap; display: block; position: relative; } .XulMenu .button:hover { border-color: #ffffff #ACA899 #ACA899 #ffffff; } .XulMenu .button-active, .XulMenu .button-active:hover { border-color: #ACA899 #ffffff #ffffff #ACA899; } .XulMenu .item, .XulMenu .item:hover, .XulMenu .item-active, .XulMenu .item-active:hover { background: #ffffff; line-height: normal; padding: 3px 30px 3px 20px; color: #000000; text-decoration: none; cursor: default; white-space: nowrap; display: block; position: relative; } .XulMenu .item:hover, .XulMenu .item-active, .XulMenu .item-active:hover { background: #316AC5; color: #ffffff; } .XulMenu .section { background: #ffffff; border: 1px solid; border-color: #F1EFE2 #716F64 #716F64 #F1EFE2; padding: 2px 1px 1px 2px; position: absolute; visibility: hidden; z-index: -1; } .XulMenu .arrow { position: absolute; top: 7px; right: 8px; border: 0; } * html .XulMenu td { position: relative; } /* ie 5.0 fix */ --- NEW FILE: example1.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> <script type="text/javascript" src="file://d:/dhtml/dev/debug.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>#1.4 XulMenu example 1</title> <link rel="stylesheet" type="text/css" href="example1.css" /> <script type="text/javascript" src="../ie5.js"></script> <script type="text/javascript" src="XulMenu.js"></script> <style type="text/css"> body { margin: 0; padding: 0; background: #ffffff; } #bar { background: #ECE9D8; border: 1px solid; border-color: #ffffff #ACA899 #ACA899 #ffffff; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; cursor: default; } #search { position: absolute; top: 0; right: 5px; } #search input, #search select { font-family: georgia, tahoma, verdana; font-size: 12px; margin-top: 4px; } p { font-family: georgia, tahoma, verdana; font-size: 11px; margin: 2em; } </style> </head> <body> <script type="text/javscript"> /* preload images */ var arrow1 = new Image(4, 7); arrow1.src = "images/arrow1.gif"; var arrow2 = new Image(4, 7); arrow2.src = "images/arrow2.gif"; </script> <div id="bar"> <table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu"> <tr> <td> <a class="button" href="javascript:void(0)">Viewer</a> <div class="section"> <a class="item" href="example1.html">Home</a> <a class="item" href="example1.html">Close</a> </div> </td> <td> <a class="button" href="javascript:void(0)">Articles</a> <div class="section"> <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Advocacy One</a> <a class="item" href="example1.html">Advocacy Two</a> <a class="item" href="example1.html">Advocacy Three</a> <a class="item" href="example1.html">Advocacy Four</a> <a class="item" href="example1.html">Advocacy Five</a> <a class="item" href="example1.html">Advocacy Six</a> <a class="item" href="example1.html">Advocacy Seven</a> </div> <a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Guru One</a> <a class="item" href="example1.html">Guru Two</a> <a class="item" href="example1.html">Guru Three</a> <a class="item" href="example1.html">Guru Four</a> </div> </div> <a class="item" href="javascript:void(0)">Design<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Archive<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.hmtl">Archive One</a> </div> <a class="item" href="example1.html">Design One</a> <a class="item" href="example1.html">Design Two</a> <a class="item" href="example1.html">Design Three</a> <a class="item" href="example1.html">Design Four</a> <a class="item" href="example1.html">Design Five</a> </div> <a class="item" href="javascript:void(0)">Develop<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Develop One</a> <a class="item" href="example1.html">Develop Two</a> <a class="item" href="example1.html">Develop Three</a> <a class="item" href="example1.html">Develop Five</a> <a class="item" href="example1.html">Develop Six</a> <a class="item" href="example1.html">Develop Seven</a> <a class="item" href="example1.html">Develop Eight</a> </div> <a class="item" href="javascript:void(0)">News<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">News One</a> <a class="item" href="example1.html">News Two</a> <a class="item" href="example1.html">News Three</a> <a class="item" href="example1.html">News Four</a> </div> <a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Review One</a> <a class="item" href="example1.html">Review Two</a> </div> <a class="item" href="example1.html">File Manager</a> </div> </td> <td> <a class="button" href="javascript:void(0)">Links</a> <div class="section"> <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Interview One</a> <a class="item" href="example1.html">Interview Two</a> <a class="item" href="example1.html">Interview Three</a> <a class="item" href="example1.html">Interview Four</a> <a class="item" href="example1.html">Interview Five</a> <a class="item" href="example1.html">Interview Six</a> <a class="item" href="example1.html">Interview Seven</a> </div> <a class="item" href="javascript:void(0)">PHP<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">PHP One</a> <a class="item" href="example1.html">PHP Two</a> <a class="item" href="example1.html">PHP Three</a> </div> <a class="item" href="example1.html">Advocacy One</a> <a class="item" href="example1.html">Advocacy Two</a> <a class="item" href="example1.html">Advocacy Three</a> <a class="item" href="example1.html">Advocacy Four</a> <a class="item" href="example1.html">Advocacy Five</a> </div> <a class="item" href="javascript:void(0)">Community<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Community One</a> <a class="item" href="example1.html">Community Two</a> <a class="item" href="example1.html">Community Three</a> <a class="item" href="example1.html">Community Four</a> <a class="item" href="example1.html">Community Five</a> </div> <a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Book One</a> <a class="item" href="example1.html">Book Two</a> <a class="item" href="example1.html">Book Three</a> <a class="item" href="example1.html">Book Four</a> </div> <a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Pattern One</a> <a class="item" href="example1.html">Pattern Two</a> <a class="item" href="example1.html">Pattern Three</a> <a class="item" href="example1.html">Pattern Four</a> </div> <a class="item" href="example1.html">Concept One</a> <a class="item" href="example1.html">Concept Two</a> <a class="item" href="example1.html">Concept Three</a> </div> <a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.html">Introductory One</a> <a class="item" href="example1.html">IIntroductory Two</a> <a class="item" href="example1.html">Introductory Three</a> <a class="item" href="example1.html">Introductory Four</a> <a class="item" href="example1.html">Introductory Five</a> <a class="item" href="example1.html">Introductory Six</a> <a class="item" href="example1.html">Introductory Seven</a> </div> <a class="item" href="example1.html">Tutorial One</a> <a class="item" href="example1.html">Tutorial Two</a> <a class="item" href="example1.html">Tutorial Three</a> <a class="item" href="example1.html">Tutorial Four</a> <a class="item" href="example1.html">Tutorial Five</a> <a class="item" href="example1.html">Tutorial Six</a> <a class="item" href="example1.html">Tutorial Seven</a> <a class="item" href="example1.html">Tutorial Eight</a> <a class="item" href="example1.html">Tutorial Nine</a> </div> </div> </td> <td> <a class="button" href="javascript:void(0)">Help</a> <div class="section"> <a class="item" href="example1.html">About XulMenu</a> <a class="item" href="example1.html">About this site</a> </div> </td> </tr> </table> <div id="search"> <input type="text" name="searchField" value="" /> <select name="searchWhat"><option value="">Articles</option><option value="">Links</option><option value="">PHP Manual</option></select> <input type="button" value="Search" /> </div> </div> <script type="text/javascript"> var menu1 = new XulMenu("menu1"); menu1.arrow1 = "images/arrow1.gif"; menu1.arrow2 = "images/arrow2.gif"; menu1.init(); </script> <p> <b>Project</b>: <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a> <br /> <b>Menu type</b>: #1.4 XulMenu example 1 <br /> <b>Features</b>: <br /> - horizontal or vertical menu <br /> - unlimited nesting <br /> - can be positioned statically or absolutely <br /> - position of submenus can be changed, so they can for example overflow parent elements <br /> - on the same page there can be many menus created <br /> - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) <br /> - search engine friendly <br /> - free for any use (BSD license) <br /> <b>Compatibility</b>: Tested and works great on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.51, Netscape 7.11, Firefox 0.7/0.8/0.9, Safari 1.2 </p> </body> </html> --- NEW FILE: XulMenu.txt --- ---------------- INSTALL ---------------- 1) include .css file 2) include .js file 3) put html structure 4) initialize menu Html structure is: - XulMenu - button - section - item - item - item - section - item - item - item - item - button - section - item - item - button Example of initializing: var menu = new XulMenu("id_of_the_menu"); menu.init(); Example of initializing and setting additional stuff: var menu1 = new XulMenu("menu1"); menu1.type = "horizontal"; menu1.position.level1.top = 0; menu1.position.level1.left = 0; menu1.position.levelX.top = 0; menu1.position.levelX.left = 0; menu1.arrow1 = "images/arrow.gif"; menu1.arrow2 = "images/arrow-active.gif"; Note: arrow1 & arrow2 set only when you want the arrow image to change when element is active. If you don't want the arrow to change keep both variables empty. ---------------- API ---------------- Controlling the menu: show(id) hide(id) hideAll() hideHigherOrEqualLevels(n) id = id of the element n = level examples: 1) menu1.show("menu1-1"); 2) menu1.show("menu1-1"); menu1.show("menu1-1-2"); menu1.show("menu1-1-2-0"); menu1.hideHigherOrEqualLevels(2); Both examples show the same. ---------------- CACHING ---------------- If the menu is big, for example you want the whole structure of the site in the menu and it is 50 KB then you should cache this data, so the user downloads this code only once and not on each request. See files: example1-cache.html, example1-cache.js example1-cache.html - instead of menu structure put this: <script type="text/javascript" src="example1-cache.js"></script> example1-cache.js - the code with removed whitespace characters and some js code: document.write('... code of the menu with removed spaces and new lines ...'); Advantages: reduce bandwidth, faster page loading Disadvantages: the links won't be visible to search engines Note: Removing whitespace characters from the menu code is easy with this tool: http://gosu.pl/demo/dhtml-tools/String.replace.html 1) In "Before" put the menu code. 2) In "Regexp" put this: \s*(<[^>]*>) 3) In "NewSubStr" put this: $1 Click Replace and it's done ! ---------------- FEATURES ---------------- - horizontal or vertical menu - unlimited nesting - can be positioned statically or absolutely - position of submenus can be changed, so they can for example overflow parent elements - on the same page there can be many menus created - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) - search engine friendly - free for any use (BSD license) ---------------- COMPATIBILITY ---------------- Tested on: IE, Mozilla, Opera, Safari, Netscape, Firefox ---------------- CHANGELOG ---------------- *** 1.4.2 *** - added support for IE 5.0 & IE 5.5 *** 1.4.1 *** - [js] fixed a minor bug, onclick event --- NEW FILE: XulMenu.js --- /* * DO NOT REMOVE THIS NOTICE * * PROJECT: mygosuMenu * VERSION: 1.4.2 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak * LINK: http://gosu.pl/dhtml/mygosumenu.html * LICENSE: BSD (revised) */ function XulMenu(id) { this.type = "horizontal"; this.position = { "level1": { "top": 0, "left": 0}, "levelX": { "top": 0, "left": 0} } this.zIndex = { "visible": 1, "hidden": -1 } this.arrow1 = null; this.arrow2 = null; // Browser detection this.browser = { "ie": Boolean(document.body.currentStyle), "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1) }; if (!this.browser.ie) { this.browser.ie5 = false; } /* Initialize the menu */ this.init = function() { if (!document.getElementById(this.id)) alert("Element '"+ this.id +"' does not exist in this document. XulMenu cannot be initialized."); if (this.type != "horizontal" && this.type != "vertical") { return alert("XulMenu.init() failed. Unknown menu type: '"+this.type+"'"); } document.onmousedown = click; if (this.browser.ie) { this.fixWrap(); } this.fixSections(); this.parse(document.getElementById(this.id).childNodes, this.tree, this.id); } /* Search for .section elements and set width for them */ this.fixSections = function() { var arr = document.getElementById(this.id).getElementsByTagName("div"); var sections = new Array(); var widths = new Array(); for (var i = 0; i < arr.length; i++) { if (arr[i].className == "section") { sections.push(arr[i]); } } for (var i = 0; i < sections.length; i++) { widths.push(this.getMaxWidth(sections[i].childNodes)); } for (var i = 0; i < sections.length; i++) { sections[i].style.width = (widths[i]) + "px"; } if (self.browser.ie) { for (var i = 0; i < sections.length; i++) { this.setMaxWidth(sections[i].childNodes, widths[i]); } } } this.fixWrap = function() { var elements = document.getElementById(this.id).getElementsByTagName("a"); for (var i = 0; i < elements.length; i++) { if (/item/.test(elements[i].className)) { elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>'; } } } /* Search for an element with highest width, return that width */ this.getMaxWidth = function(nodes) { var maxWidth = 0; for (var i = 0; i < nodes.length; i++) { if (nodes[i].nodeType != 1 || nodes[i].className == "section") { continue; } if (nodes[i].offsetWidth > maxWidth) maxWidth = nodes[i].offsetWidth; } return maxWidth; } /* Set width for item elements */ this.setMaxWidth = function(nodes, maxWidth) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].nodeType == 1 && /item/.test(nodes[i].className) && nodes[i].currentStyle) { if (this.browser.ie) { nodes[i].style.width = (maxWidth) + "px"; } else { nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px"; } } } } /* Parse menu structure, create events, position elements */ this.parse = function(nodes, tree, id) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].nodeType != 1) { continue }; switch (nodes[i].className) { case "button": nodes[i].id = id + "-" + tree.length; tree.push(new Array()); nodes[i].onmouseover = buttonOver; nodes[i].onclick = buttonClick; break; case "item": nodes[i].id = id + "-" + tree.length; tree.push(new Array()); nodes[i].onmouseover = itemOver; nodes[i].onmouseout = itemOut; nodes[i].onclick = itemClick; break; case "section": nodes[i].id = id + "-" + (tree.length - 1) + "-section"; var box1 = document.getElementById(id + "-" + (tree.length - 1)); var box2 = document.getElementById(nodes[i].id); var el = new Element(box1.id); if (el.level == 1) { if (this.type == "horizontal") { box2.style.top = (box1.offsetTop + box1.offsetHeight + this.position.level1.top) + "px"; if (this.browser.ie) { box2.style.left = (this.position.level1.left) + "px"; } else { box2.style.left = (box1.offsetLeft + this.position.level1.left) + "px"; } } else if (this.type == "vertical") { box2.style.top = (box1.offsetTop + this.position.level1.top) + "px"; if (this.browser.ie) { box2.style.left = (box1.offsetWidth + this.position.level1.left) + "px"; } else { box2.style.left = (box1.offsetLeft + box1.offsetWidth + this.position.level1.left) + "px"; } } } else { box2.style.top = (box1.offsetTop + this.position.levelX.top) + "px"; box2.style.left = (box1.offsetLeft + box1.offsetWidth + this.position.levelX.left) + "px"; } break; case "arrow": nodes[i].id = id + "-" + (tree.length - 1) + "-arrow"; break; } if (nodes[i].childNodes) { if (nodes[i].className == "section") { this.parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1)); } else { this.parse(nodes[i].childNodes, tree, id); } } } } /* Hide all sections */ this.hideAll = function() { for (var i = this.visible.length - 1; i >= 0; i--) { this.hide(this.visible[i]); } } /* Hide higher or equal levels */ this.hideHigherOrEqualLevels = function(n) { for (var i = this.visible.length - 1; i >= 0; i--) { var el = new Element(this.visible[i]); if (el.level >= n) { this.hide(el.id); } else { return; } } } /* Hide a section */ this.hide = function(id) { var el = new Element(id); document.getElementById(id).className = (el.level == 1 ? "button" : "item"); if (el.level > 1 && this.arrow2) { document.getElementById(id + "-arrow").src = this.arrow1; } document.getElementById(id + "-section").style.visibility = "hidden"; document.getElementById(id + "-section").style.zIndex = this.zIndex.hidden; if (this.visible.contains(id)) { if (this.visible.getLast() == id) { this.visible.pop(); } else { throw "XulMenu.hide("+id+") failed, trying to hide element that is not deepest visible element"; } } else { throw "XulMenu.hide("+id+") failed, cannot hide element that is not visible"; } } /* Show a section */ this.show = function(id) { var el = new Element(id); document.getElementById(id).className = (el.level == 1 ? "button-active" : "item-active"); if (el.level > 1 && this.arrow2) { document.getElementById(id + "-arrow").src = this.arrow2; } document.getElementById(id + "-section").style.visibility = "visible"; document.getElementById(id + "-section").style.zIndex = this.zIndex.visible; this.visible.push(id); } /* event, document.onmousedown */ function click(e) { var el; if (e) { el = e.target.tagName ? e.target : e.target.parentNode; } else { el = window.event.srcElement; if (el.parentNode && /item/.test(el.parentNode.className)) { el = el.parentNode; } } if (!self.visible.length) { return }; if (!el.onclick) { self.hideAll(); } } /* event, button.onmouseover */ function buttonOver() { if (!self.visible.length) { return; } if (self.visible.contains(this.id)) { return }; self.hideAll(); var el = new Element(this.id); if (el.hasChilds()) { self.show(this.id); } } /* event, button.onclick */ function buttonClick() { this.blur(); if (self.visible.length) { self.hideAll(); } else { var el = new Element(this.id); if (el.hasChilds()) { self.show(this.id); } } } /* event, item.onmouseover */ function itemOver() { var el = new Element(this.id); self.hideHigherOrEqualLevels(el.level); if (el.hasChilds()) { self.show(this.id); } } /* event, item.onmouseout */ function itemOut() { var el = new Element(this.id); if (!el.hasChilds()) { document.getElementById(this.id).className = "item"; } } /* event, item.onclick */ function itemClick() { this.blur(); var el = new Element(this.id); self.hideHigherOrEqualLevels(el.level); if (el.hasChilds()) { self.show(this.id); } } function Element(id) { /* Get Level of given id * Examples: menu-1 (1 level), menu-1-4 (2 level) */ this.getLevel = function() { var s = this.id.substr(this.menu.id.length); return s.substrCount("-"); } /* Check whether an element has a sub-section */ this.hasChilds = function() { return Boolean(document.getElementById(this.id + "-section")); } if (!id) { throw "XulMenu.Element(id) failed, id cannot be empty"; } this.menu = self; this.id = id; this.level = this.getLevel(); } this.id = id; var self = this; this.tree = new Array(); /* Multidimensional array, structure of the menu */ this.visible = new Array(); /* Example: Array("menu-0", "menu-0-4", ...), succession is important ! */ } /* Check whether array contains given string */ if (typeof Array.prototype.contains == "undefined") { Array.prototype.contains = function(s) { for (var i = 0; i < this.length; i++) { if (this[i] === s) { return true; } } return false; } } /* Get the last element from the array */ if (typeof Array.prototype.getLast == "undefined") { Array.prototype.getLast = function() { return this[this.length-1]; } } /* Counts the number of substring occurrences */ if (typeof String.prototype.substrCount == "undefined") { String.prototype.substrCount = function(s) { return this.split(s).length - 1; } } --- NEW FILE: example2.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>#1.4 XulMenu example 2</title> <link rel="stylesheet" type="text/css" href="example2.css" /> <script type="text/javascript" src="../ie5.js"></script> <script type="text/javascript" src="XulMenu.js"></script> <style type="text/css"> html, body { height: 100%; } body { margin: 0; padding: 0; background: #ffffff; } #bar { background: #ECE9D8; border: 1px solid; border-color: #ffffff #ACA899 #ACA899 #ffffff; padding: 3px; cursor: default; } table td { vertical-align: top; } p { font-family: georgia, tahoma, verdana; font-size: 11px; margin: 2em; } </style> </head> <body> <script type="text/javscript"> /* preload images */ var arrow1 = new Image(4, 7); arrow1.src = "images/arrow1.gif"; var arrow2 = new Image(4, 7); arrow2.src = "images/arrow2.gif"; </script> <table cellspacing="0" cellpadding="0" height="100%"><tr><td id="bar"> <table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu"> <tr> <td> <a class="button" href="javascript:void(0)">Viewer</a> <div class="section"> <a class="item" href="example2.html">Home</a> <a class="item" href="example2.html">Close</a> </div> <a class="button" href="javascript:void(0)">Articles</a> <div class="section"> <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Advocacy One</a> <a class="item" href="example2.html">Advocacy Two</a> <a class="item" href="example2.html">Advocacy Three</a> <a class="item" href="example2.html">Advocacy Four</a> <a class="item" href="example2.html">Advocacy Five</a> <a class="item" href="example2.html">Advocacy Six</a> <a class="item" href="example2.html">Advocacy Seven</a> </div> <a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Guru One</a> <a class="item" href="example2.html">Guru Two</a> <a class="item" href="example2.html">Guru Three</a> <a class="item" href="example2.html">Guru Four</a> </div> </div> <a class="item" href="javascript:void(0)">Design<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Archive<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example1.hmtl">Archive One</a> </div> <a class="item" href="example2.html">Design One</a> <a class="item" href="example2.html">Design Two</a> <a class="item" href="example2.html">Design Three</a> <a class="item" href="example2.html">Design Four</a> <a class="item" href="example2.html">Design Five</a> </div> <a class="item" href="javascript:void(0)">Develop<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Develop One</a> <a class="item" href="example2.html">Develop Two</a> <a class="item" href="example2.html">Develop Three</a> <a class="item" href="example2.html">Develop Five</a> <a class="item" href="example2.html">Develop Six</a> <a class="item" href="example2.html">Develop Seven</a> <a class="item" href="example2.html">Develop Eight</a> </div> <a class="item" href="javascript:void(0)">News<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">News One</a> <a class="item" href="example2.html">News Two</a> <a class="item" href="example2.html">News Three</a> <a class="item" href="example2.html">News Four</a> </div> <a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Review One</a> <a class="item" href="example2.html">Review Two</a> </div> <a class="item" href="example2.html">File Manager</a> </div> <a class="button" href="javascript:void(0)">Links</a> <div class="section"> <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Interview One</a> <a class="item" href="example2.html">Interview Two</a> <a class="item" href="example2.html">Interview Three</a> <a class="item" href="example2.html">Interview Four</a> <a class="item" href="example2.html">Interview Five</a> <a class="item" href="example2.html">Interview Six</a> <a class="item" href="example2.html">Interview Seven</a> </div> <a class="item" href="javascript:void(0)">PHP<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">PHP One</a> <a class="item" href="example2.html">PHP Two</a> <a class="item" href="example2.html">PHP Three</a> </div> <a class="item" href="example2.html">Advocacy One</a> <a class="item" href="example2.html">Advocacy Two</a> <a class="item" href="example2.html">Advocacy Three</a> <a class="item" href="example2.html">Advocacy Four</a> <a class="item" href="example2.html">Advocacy Five</a> </div> <a class="item" href="javascript:void(0)">Community<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Community One</a> <a class="item" href="example2.html">Community Two</a> <a class="item" href="example2.html">Community Three</a> <a class="item" href="example2.html">Community Four</a> <a class="item" href="example2.html">Community Five</a> </div> <a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Book One</a> <a class="item" href="example2.html">Book Two</a> <a class="item" href="example2.html">Book Three</a> <a class="item" href="example2.html">Book Four</a> </div> <a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Pattern One</a> <a class="item" href="example2.html">Pattern Two</a> <a class="item" href="example2.html">Pattern Three</a> <a class="item" href="example2.html">Pattern Four</a> </div> <a class="item" href="example2.html">Concept One</a> <a class="item" href="example2.html">Concept Two</a> <a class="item" href="example2.html">Concept Three</a> </div> <a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a> <div class="section"> <a class="item" href="example2.html">Introductory One</a> <a class="item" href="example2.html">IIntroductory Two</a> <a class="item" href="example2.html">Introductory Three</a> <a class="item" href="example2.html">Introductory Four</a> <a class="item" href="example2.html">Introductory Five</a> <a class="item" href="example2.html">Introductory Six</a> <a class="item" href="example2.html">Introductory Seven</a> </div> <a class="item" href="example2.html">Tutorial One</a> <a class="item" href="example2.html">Tutorial Two</a> <a class="item" href="example2.html">Tutorial Three</a> <a class="item" href="example2.html">Tutorial Four</a> <a class="item" href="example2.html">Tutorial Five</a> <a class="item" href="example2.html">Tutorial Six</a> <a class="item" href="example2.html">Tutorial Seven</a> <a class="item" href="example2.html">Tutorial Eight</a> <a class="item" href="example2.html">Tutorial Nine</a> </div> </div> <a class="button" href="javascript:void(0)">Help</a> <div class="section"> <a class="item" href="example2.html">About XulMenu</a> <a class="item" href="example2.html">About this site</a> </div> </td> </tr> </table> </td> <td> <p> <b>Project</b>: <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a> <br /> <b>Menu type</b>: #1.4 XulMenu example 2 <br /> <b>Features</b>: <br /> - horizontal or vertical menu <br /> - unlimited nesting <br /> - can be positioned statically or absolutely <br /> - position of submenus can be changed, so they can for example overflow parent elements <br /> - on the same page there can be many menus created <br /> - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) <br /> - search engine friendly <br /> - free for any use (BSD license) <br /> <b>Compatibility</b>: Tested and works great on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.51, Netscape 7.11, Firefox 0.7/0.8/0.9, Safari 1.2 </p> </td></tr></table> <script type="text/javascript"> var menu1 = new XulMenu("menu1"); menu1.type = "vertical"; menu1.position.level1.left = 2; menu1.arrow1 = "images/arrow1.gif"; menu1.arrow2 = "images/arrow2.gif"; menu1.init(); </script> </body> </html> |
