Menu
▾
▴
[mxbb-commits] mx_music/phpbb2/mx_mod/mx_shared/mygosumenu/1.3 ClickShowHideMenu.css, NONE, 1.1 ClickShowHideMenu.js, NONE, 1.1 ClickShowHideMenu.txt, NONE, 1.1 example1.html, NONE, 1.1 example2.html, NONE, 1.1 example3.html, NONE, 1.1
Update of /cvsroot/mxbb/mx_music/phpbb2/mx_mod/mx_shared/mygosumenu/1.3 In directory sc8-pr-cvs16.sourceforge.net:/tmp/cvs-serv19367/mx_mod/mx_shared/mygosumenu/1.3 Added Files: ClickShowHideMenu.css ClickShowHideMenu.js ClickShowHideMenu.txt example1.html example2.html example3.html Log Message: upgrade --- NEW FILE: example1.html --- <html> <head> <link rel="stylesheet" type="text/css" href="ClickShowHideMenu.css"> <script type="text/javascript" src="ClickShowHideMenu.js"></script> <style type="text/css"> body { background-color: #111433; } </style> </head> <body> <table cellspacing="0" cellpadding="0" id="click-menu1" class="click-menu"> <tr> <td> <div class="box1">Products <img src="images/arrow1.gif" width="11" height="11" alt=""></div> <div class="section"> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product One</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product Two</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product Three</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product Four</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product Five</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div class="box1">Downloads <img src="images/arrow1.gif"></div> <div class="section"> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product One</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product Two</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Product Three</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div class="box1">Support <img src="images/arrow1.gif" width="11" height="11" alt=""></div> <div class="section"> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">E-mail Support</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div class="box1">Partners <img src="images/arrow1.gif" width="11" height="11" alt=""></div> <div class="section"> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Partner Benefits</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Partner Application</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Partner Listing</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div class="box1">Customers <img src="images/arrow1.gif" width="11" height="11" alt=""></div> <div class="section"> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer One</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer Two</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer Three</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer Four</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer Five</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer Six</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Customer Seven</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div class="box1">About Us <img src="images/arrow1.gif" width="11" height="11" alt=""></div> <div class="section"> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Executive Team</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Investors</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Career</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Press Center</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Success Stories</a></div> <div class="box2"><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="example1.html">Contact Us</a></div> </div> </td> </tr> </table> <script type="text/javascript"> var clickMenu1 = new ClickShowHideMenu('click-menu1'); clickMenu1.init(); </script> </body> </html> --- NEW FILE: example3.html --- <html> <head> <script type="text/javascript" src="ClickShowHideMenu.js"></script> <style type="text/css"> body { background-color: #cccccc; } div.left { width: 190px; height: 100%; background-color: #ffffff; } td.top { background-color: #999999; line-height: 26px; text-indent: 10px; font-size: 13px; font-weight: bold; font-family: tahoma; color: #ffffff; } td.section { padding: 6px 12px; } .click-menu { -moz-user-select: none; } .click-menu .box1 { background: url("images/tree-node.gif") no-repeat; padding-left: 19px; cursor: default; } .click-menu .box1-open { background: url("images/tree-node-open.gif") no-repeat; padding-left: 19px; cursor: default; } .click-menu .box1, .click-menu .box1-open, { color: #000000; font-family: arial; font-size: 12px; } /* mozilla fix */ html>body .click-menu .box1, html>body .click-menu .box1-open { color: #000000; font-family: arial; font-size: 12px; line-height: 16px; padding-bottom: 1px; } /* ie fix */ * html .click-menu .box1, * html .click-menu .box1-open { color: #000000; font-family: arial; font-size: 12px; height: 16px; } .click-menu .section { font-family: arial; font-size: 12px; line-height: 16px; display: none; } .click-menu .section a { color: #000000; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #0000ff; text-decoration: none; white-space: nowrap; } .click-menu .box2 { background: url("images/tree-leaf.gif") no-repeat; padding-left: 19px; } .click-menu .box2-last { background: url("images/tree-leaf-last.gif") no-repeat; padding-left: 19px; } </style> </head> <body> <script type="text/javascript"> /* preload images, you can remove this code */ img1 = new Image(); img1.src = "images/tree-node.gif"; img2 = new Image(); img2.src = "images/tree-node-open.gif"; img3 = new Image(); img3.src = "images/tree-leaf.gif"; img4 = new Image(); img4.src = "images/tree-leaf-last.gif"; </script> <script type="text/javascript"> window.onload = function() { var ClickMenu3a = new ClickShowHideMenu('click-menu3a'); ClickMenu3a.box1Hover = false; ClickMenu3a.box2Hover = false; ClickMenu3a.init(); var ClickMenu3b = new ClickShowHideMenu('click-menu3b'); ClickMenu3b.box1Hover = false; ClickMenu3b.box2Hover = false; ClickMenu3b.init(); var ClickMenu3c = new ClickShowHideMenu('click-menu3c'); ClickMenu3c.box1Hover = false; ClickMenu3c.box2Hover = false; ClickMenu3c.init(); } </script> <div class="left"> <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td class="top">» Products</td> </tr> <tr> <td class="section"> <div id="click-menu3a" class="click-menu"> <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <div><span class="box1">Product One</span></div> <div class="section"> <div class="box2"><a href="example3.html">Overview</a></div> <div class="box2"><a href="example3.html">Features</a></div> <div class="box2-last"><a href="example3.html">Requirements</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Product Two</span></div> <div class="section"> <div class="box2"><a href="example3.html">Overwiev</a></div> <div class="box2"><a href="example3.html">Features</a></div> <div class="box2"><a href="example3.html">Requirements</a></div> <div class="box2"><a href="example3.html">Screenshots</a></div> <div class="box2"><a href="example3.html">Flash Demos</a></div> <div class="box2-last"><a href="example3.html">Live Demo</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Product Three</span></div> <div class="section"> <div class="box2"><a href="example3.html">Overview</a></div> <div class="box2"><a href="example3.html">Features</a></div> <div class="box2-last"><a href="example3.html">Requirements</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Product Four</span></div> <div class="section"> <div class="box2"><a href="example3.html">Overview</a></div> <div class="box2"><a href="example3.html">Features</a></div> <div class="box2"><a href="example3.html">Requirements</a></div> <div class="box2"><a href="example3.html">Screenshots</a></div> <div class="box2-last"><a href="example3.html">Live Demo</a></div> </div> </td> </tr> </table> </div> </td> </tr> <tr> <td class="top">» Downloads</td> </tr> <tr> <td class="section"> <div id="click-menu3b" class="click-menu"> <table cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <div><span class="box1">Program One</span></div> <div class="section"> <div class="box2"><a href="example3.html">Windows Download</a></div> <div class="box2"><a href="example3.html">Solaris Download</a></div> <div class="box2-last"><a href="example3.html">Linux Download</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Program Two</span></div> <div class="section"> <div class="box2"><a href="example3.html">Windows Download</a></div> <div class="box2-last"><a href="example3.html">Linux Download</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Program Three</span></div> <div class="section"> <div class="box2-last"><a href="example3.html">Linux Download</a></div> </div> </td> </tr> </table> </div> </td> </tr> <tr> <td class="top">» Other</td> </tr> <tr> <td class="section"> <div id="click-menu3c" class="click-menu"> <table cellspacing="0" cellpadding="0" width="100%"> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Partners</span></div> <div class="section"> <div class="box2"><a href="example3.html">Partner Benefits</a></div> <div class="box2"><a href="example3.html">Partner Application</a></div> <div class="box2-last"><a href="example3.html">Partner Listing</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">Customers</span></div> <div class="section"> <div class="box2"><a href="example3.html">Customer One</a></div> <div class="box2"><a href="example3.html">Customer Two</a></div> <div class="box2"><a href="example3.html">Customer Three</a></div> <div class="box2"><a href="example3.html">Customer Four</a></div> <div class="box2"><a href="example3.html">Customer Five</a></div> <div class="box2"><a href="example3.html">Customer Six</a></div> <div class="box2-last"><a href="example3.html">Customer Seven</a></div> </div> </td> </tr> <tr><td height="2"></td></tr> <tr> <td> <div><span class="box1">About us</span></div> <div class="section"> <div class="box2"><a href="example3.html">Executive Team</a></div> <div class="box2"><a href="example3.html">Investors</a></div> <div class="box2"><a href="example3.html">Career</a></div> <div class="box2"><a href="example3.html">Press Center</a></div> <div class="box2"><a href="example3.html">Success Stories</a></div> <div class="box2-last"><a href="example3.html">Contact Us</a></div> </div> </td> </tr> </table> </div> </td> </tr> </table> </div> </body> </html> --- NEW FILE: ClickShowHideMenu.js --- /* * DO NOT REMOVE THIS NOTICE * * PROJECT: mygosuMenu * VERSION: 1.3.3 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak * LINK: http://gosu.pl/dhtml/mygosumenu.html * LICENSE: BSD (revised) */ function ClickShowHideMenu(id) { this.box1Hover = true; this.box2Hover = true; this.highlightActive = false; this.init_id = -1; this.init = function() { if (!document.getElementById(this.id)) { alert("Element '"+this.id+"' does not exist in this document. ClickShowHideMenu cannot be initialized"); return; } this.parse(document.getElementById(this.id).childNodes, this.tree, this.id); this.load(); if (window.attachEvent) { window.attachEvent("onunload", function(e) { self.save(); }); } else if (window.addEventListener) { window.addEventListener("unload", function(e) { self.save(); }, false); } } this.parse = function(nodes, tree, id) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].nodeType != 1) { continue; } if (nodes[i].className) { if ("box1" == nodes[i].className.substr(0, 4)) { nodes[i].id = id + "-" + tree.length; tree[tree.length] = new Array(); eval('nodes[i].onmouseover = function() { self.box1over("'+nodes[i].id+'"); }'); eval('nodes[i].onmouseout = function() { self.box1out("'+nodes[i].id+'"); }'); eval('nodes[i].onclick = function() { self.box1click("'+nodes[i].id+'"); }'); } if ("section" == nodes[i].className) { id = id + "-" + (tree.length - 1); nodes[i].id = id + "-section"; tree = tree[tree.length - 1]; } if ("box2" == nodes[i].className.substr(0, 4)) { nodes[i].id = id + "-" + tree.length; tree[tree.length] = new Array(); eval('nodes[i].onmouseover = function() { self.box2over("'+nodes[i].id+'", "'+nodes[i].className+'"); }'); eval('nodes[i].onmouseout = function() { self.box2out("'+nodes[i].id+'", "'+nodes[i].className+'"); }'); } } if (this.highlightActive && nodes[i].tagName && nodes[i].tagName == "A") { if (document.location.href == nodes[i].href) { nodes[i].className = (nodes[i].className ? ' active' : 'active') } } if (nodes[i].childNodes) { this.parse(nodes[i].childNodes, tree, id); } } } this.box1over = function(id) { if (!this.box1Hover) return; if (!document.getElementById(id)) return; document.getElementById(id).className = (this.id_openbox == id ? "box1-open-hover" : "box1-hover"); } this.box1out = function(id) { if (!this.box1Hover) return; if (!document.getElementById(id)) return; document.getElementById(id).className = (this.id_openbox == id ? "box1-open" : "box1"); } this.box1click = function(id) { if (!document.getElementById(id)) { return; } var id_openbox = this.id_openbox; if (this.id_openbox) { if (!document.getElementById(id + "-section")) { return; } this.hide(); if (id_openbox == id) { if (this.box1hover) { document.getElementById(id_openbox).className = "box1-hover"; } else { document.getElementById(id_openbox).className = "box1"; } } else { document.getElementById(id_openbox).className = "box1"; } } if (id_openbox != id) { this.show(id); var className = document.getElementById(id).className; if ("box1-hover" == className) { document.getElementById(id).className = "box1-open-hover"; } if ("box1" == className) { document.getElementById(id).className = "box1-open"; } } } this.box2over = function(id, className) { if (!this.box2Hover) return; if (!document.getElementById(id)) return; document.getElementById(id).className = className + "-hover"; } this.box2out = function(id, className) { if (!this.box2Hover) return; if (!document.getElementById(id)) return; document.getElementById(id).className = className; } this.show = function(id) { if (document.getElementById(id + "-section")) { document.getElementById(id + "-section").style.display = "block"; this.id_openbox = id; } } this.hide = function() { document.getElementById(this.id_openbox + "-section").style.display = "none"; this.id_openbox = ""; } this.save = function() { if (this.id_openbox) { this.cookie.set(this.id, this.id_openbox); } else { this.cookie.del(this.id); } } this.load = function() { if (this.init_id == -1) { // Use cookie if no init id is passed var id_openbox = this.cookie.get(this.id); } else { var id_openbox = this.id + '-' + this.init_id; } if (id_openbox) { this.show(id_openbox); document.getElementById(id_openbox).className = "box1-open"; } } function Cookie() { this.get = function(name) { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var a = cookies[i].split("="); if (a.length == 2) { a[0] = a[0].trim(); a[1] = a[1].trim(); if (a[0] == name) { return unescape(a[1]); } } } return ""; } this.set = function(name, value) { document.cookie = name + "=" + escape(value); } this.del = function(name) { document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } var self = this; this.id = id; this.tree = new Array(); this.cookie = new Cookie(); this.id_openbox = ""; } if (typeof String.prototype.trim == "undefined") { String.prototype.trim = function() { var s = this.replace(/^\s*/, ""); return s.replace(/\s*$/, ""); } } --- NEW FILE: ClickShowHideMenu.css --- .click-menu { width: 135px; } .click-menu .box1 { background-color: #202340; color: #99bb99; font-weight: bold; font-size: 12px; font-family: tahoma; padding: 4px 8px; border-width: 1px; border-color: #448882; border-style: solid solid solid solid; cursor: default; position: relative; } .click-menu .box1-hover { background-color: #113344; color: #CCEEEB; font-weight: bold; font-size: 12px; font-family: tahoma; padding: 4px 8px; border-width: 1px; border-color: #99CCAE; border-style: solid solid solid solid; cursor: default; position: relative; } .click-menu .box1-open { background-color: #202340; color: #99bb99; font-weight: bold; font-size: 12px; font-family: tahoma; padding: 4px 8px; border-width: 1px; border-color: #448882; border-style: solid solid none solid; cursor: default; position: relative; } .click-menu .box1-open-hover { background-color: #113344; color: #CCEEEB; font-weight: bold; font-size: 12px; font-family: tahoma; padding: 4px 8px; border-width: 1px; border-color: #99CCAE; border-style: solid solid none solid; cursor: default; position: relative; } .click-menu .box1 img, .click-menu .box1-hover img, .click-menu .box1-open img, .click-menu .box1-open-hover img { position: absolute; top: 6px; right: 6px; } .click-menu .section { background-color: #224441; font-family: arial; font-size: 12px; line-height: 15px; padding: 5px 5px 6px 5px; border-width: 1px; border-color: #448882; border-style: none solid solid solid; display: none; } .click-menu .section a { color: #8BAA88; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #CCEEEB; text-decoration: none; white-space: nowrap; } .click-menu .box2 { } .click-menu .box2-hover { background: #000000; } .click-menu .section .active, .click-menu .section .active:hover { color: yellow; } --- NEW FILE: example2.html --- <html> <head> <script type="text/javascript" src="ClickShowHideMenu.js"></script> <style type="text/css"> body { background-color: #271D11; } .click-menu { } .click-menu .box1 { background: url("images/button1.gif") no-repeat; color: #f9f9f9; } .click-menu .box1-hover { background: url("images/button1.gif") no-repeat; color: #FFEBA9; } .click-menu .box1-open { background: url("images/button1-click.gif") no-repeat; color: #f9f9f9; } .click-menu .box1-open-hover { background: url("images/button1-click.gif") no-repeat; color: #FFEBA9; } .click-menu .box1, .click-menu .box1-hover, .click-menu .box1-open, .click-menu .box1-open-hover { text-indent: 12px; font-weight: bold; font-size: 14px; line-height: 31px; font-family: arial; cursor: pointer; width: 150px; } .click-menu .section { background-color: #46351F; font-family: arial; font-size: 13px; line-height: 15px; padding: 0 0 5px 10px; display: none; } .click-menu .section a { color: #ffffff; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #FFFF99; text-decoration: none; white-space: nowrap; } .click-menu .box2 { border-color: #7B6139; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; } .click-menu .box2-hover { border-color: #7B6139; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; background: #5B4529; } </style> </head> <body> <script type="text/javascript"> /* preload images, you can remove this code */ var img = new Array(); img[0] = new Image(); img[0].src = "images/button1.gif"; img[1] = new Image(); img[1].src = "images/button1-click.gif"; </script> <table><tr><td style="height: 500px; background-color: #46351F; vertical-align: top; padding: 10px;"> <table cellspacing="0" cellpadding="0" id="click-menu2" class="click-menu"> <tr> <td> <div class="box1">Products</div> <div class="section"> <div class="box2"><a href="example2.html">Product One</a></div> <div class="box2"><a href="example2.html">Product Two</a></div> <div class="box2"><a href="example2.html">Product Three</a></div> <div class="box2"><a href="example2.html">Product Four</a></div> <div class="box2"><a href="example2.html">Product Five</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">Partners</div> <div class="section"> <div class="box2"><a href="example2.html">Partner Benefits</a></div> <div class="box2"><a href="example2.html">Partner Application</a></div> <div class="box2"><a href="example2.html">Partner Listing</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">Customers</div> <div class="section"> <div class="box2"><a href="example2.html">Customer One</a></div> <div class="box2"><a href="example2.html">Customer Two</a></div> <div class="box2"><a href="example2.html">Customer Three</a></div> <div class="box2"><a href="example2.html">Customer Four</a></div> <div class="box2"><a href="example2.html">Customer Five</a></div> <div class="box2"><a href="example2.html">Customer Six</a></div> <div class="box2"><a href="example2.html">Customer Seven</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">About Us</div> <div class="section"> <div class="box2"><a href="example2.html">Executive Team</a></div> <div class="box2"><a href="example2.html">Investors</a></div> <div class="box2"><a href="example2.html">Career</a></div> <div class="box2"><a href="example2.html">Press Center</a></div> <div class="box2"><a href="example2.html">Success Stories</a></div> <div class="box2"><a href="example2.html">Contact Us</a></div> </div> </td> </tr> </table> </td></tr></table> <script type="text/javascript"> var clickMenu2 = new ClickShowHideMenu('click-menu2'); clickMenu2.init(); </script> </body> </html> --- NEW FILE: ClickShowHideMenu.txt --- /* * PROJECT: mygosuMenu * VERSION: 1.3.2 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak * LINK: http://gosu.pl/dhtml/mygosumenu.html * LICENSE: BSD (revised) */ ---------------- ! ABOUT ---------------- A drop down click-show-hide menu. ---------------- ! FEATURES ---------------- Use a cookie to remember last state of the menu ---------------- ! COMPATIBILITY ---------------- Tested on IE 6, Mozilla 1.6, Netscape 7.11, Opera 7.23, Firebird 0.7 ---------------- ! CHANGELOG ---------------- *** 1.3.4 *** - /tests/highlightActive.html added [minor changes in .js, added class .active in .css] *** 1.3.3 *** - [js] fixed a bug on Konqueror *** 1.3.2 *** - some fixes in html structure & css to fix a bug that appeared on newest version of Mozilla 1.7 & Firefox 0.9 - [html] moved class & id from DIV to TABLE - [css] removed "width: 100%;" properties from all elements *** 1.3.1 *** - To initialize menu now you only have to specify an onload event on body element (see menu.html) - Fixed a cookie bug - Fixed a few other bugs |
