Black Menu : Menu « GUI Components « JavaScript DHTML






Black Menu

 <html> <head> <!-- CryptoMX Tools Copyright (C) 2004 - 3005 Derek Buitenhuis This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. --> <link rel=STYLESHEET href="style.css" type="text/css"> <title>DES Crypt</title> <style> all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100} #MainTable A:hover {color: #A0A0A0;} </style> </head> <body> <script language="JavaScript"> var keepstatic=1 //specify whether menu should stay static (works only in IE4+)  var menucolor="#000000"//specify menu color  var submenuwidth=150 //specify sub menus' width  </script> <!-- menu.js --> <script language="JavaScript"> if (document.all) {n=0;ie=1;ns6=0;fShow="visible";fHide="hidden";} if (document.getElementById&&!document.all) {n=0;ie=0;ns6=1;fShow="visible";fHide="hidden";} if (document.layers) {n=1;ie=0;ns6=0;fShow="show";fHide="hide";} opr6=ie&&navigator.userAgent.indexOf("Opera")!=-1 window.onerror=new Function("return true") rightX = 0; function Menu() { this.bgColor = menucolor; if (ie) this.menuFont = "bold 12px Arial"; if (n) this.menuFont = "bold 12px Verdana"; this.fontColor = "black"; this.addItem = addItem; this.addSubItem = addSubItem; this.showMenu = showMenu; this.mainPaneBorder = 0; this.subMenuPaneBorder = 0; this.subMenuPaneWidth = submenuwidth; lastMenu = null; rightY = 0; leftY = 0; leftX = 0; HTMLstr = ""; HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n"; HTMLstr += "\n"; if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:absolute;top:0;left:0;'>\n"; HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n"; HTMLstr += "<tr>"; if (n) HTMLstr += "<td>&nbsp;"; HTMLstr += "<!-- MAIN MENU STARTS -->\n"; HTMLstr += "<!-- MAIN_MENU -->\n"; HTMLstr += "<!-- MAIN MENU ENDS -->\n"; if (n) HTMLstr += "</td>"; HTMLstr += "</tr>\n"; HTMLstr += "</table>\n"; HTMLstr += "\n"; HTMLstr += "<!-- SUB MENU STARTS -->\n"; HTMLstr += "<!-- SUB_MENU -->\n"; HTMLstr += "<!-- SUB MENU ENDS -->\n"; HTMLstr += "\n"; if (ie||ns6) HTMLstr+= "</div>\n"; HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n"; } function addItem(idItem, text, hint, location, altLocation) { var Lookup = "<!-- ITEM "+idItem+" -->"; if (HTMLstr.indexOf(Lookup) != -1) { alert(idParent + " already exist"); return; } var MENUitem = ""; MENUitem += "\n<!-- ITEM "+idItem+" -->\n"; if (n) { MENUitem += "<ilayer name="+idItem+">"; MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">"; MENUitem += "|&nbsp;"; MENUitem += text; MENUitem += "</a>"; MENUitem += "</ilayer>"; } if (ie||ns6) { MENUitem += "<td>\n"; MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n"; MENUitem += "<a "; MENUitem += "class=clsMenuItemIE "; if (hint != null) MENUitem += "title='"+hint+"' "; if (location != null) { MENUitem += "href='"+location+"' "; MENUitem += "onmouseover=\"hideAll()\" "; } else { if (altLocation != null) MENUitem += "href='"+altLocation+"' "; else MENUitem += "href='.' "; MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" "; MENUitem += "onclick=\"return false;\" " } MENUitem += ">"; MENUitem += "|&nbsp;\n"; MENUitem += text; MENUitem += "</a>\n"; MENUitem += "</div>\n"; MENUitem += "</td>\n"; } MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n"; MENUitem += "<!-- MAIN_MENU -->\n"; HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem); } function addSubItem(idParent, text, hint, location, linktarget) { var MENUitem = ""; Lookup = "<!-- ITEM "+idParent+" -->"; if (HTMLstr.indexOf(Lookup) == -1) { alert(idParent + " not found"); return; } Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->"; if (HTMLstr.indexOf(Lookup) == -1) { if (n) { MENUitem += "\n"; MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n"; MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n"; MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n"; MENUitem += "</table>\n"; MENUitem += "</layer>\n"; MENUitem += "\n"; } if (ie||ns6) { MENUitem += "\n"; MENUitem += "<div id='"+idParent+"submenu' onmouseout=operahide() style='position:absolute; visibility: hidden; z-index:100; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n"; MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n"; MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n"; MENUitem += "</table>\n"; MENUitem += "</div>\n"; MENUitem += "\n"; } MENUitem += "<!-- SUB_MENU -->\n"; HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem); } Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n"; if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n"; if (ie||ns6) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n"; MENUitem += Lookup; HTMLstr = HTMLstr.replace(Lookup, MENUitem); } function showMenu() { document.writeln(HTMLstr); } function displaySubMenu(idMainMenu) { var menu; var submenu; if (n) { submenu = document.layers[idMainMenu+"submenu"]; if (lastMenu != null && lastMenu != submenu) hideAll(); submenu.left = document.layers[idMainMenu].pageX; submenu.top = document.layers[idMainMenu].pageY + 25; submenu.visibility = fShow; leftX = document.layers[idMainMenu+"submenu"].left; rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width; leftY = document.layers[idMainMenu+"submenu"].top+ document.layers[idMainMenu+"submenu"].clip.height; rightY = leftY; } elseif (ie||ns6) { menu = ie? eval(idMainMenu) : document.getElementById(idMainMenu); submenu = ie? eval(idMainMenu+"submenu.style") : document.getElementById(idMainMenu+"submenu").style; submenu.left = calculateSumOffset(menu, 'offsetLeft'); submenu.top = menu.style.top+23; submenu.visibility = fShow; if (lastMenu != null && lastMenu != submenu) hideAll(); leftX = ie? document.all[idMainMenu+"submenu"].style.posLeft : parseInt(document.getElementById(idMainMenu+"submenu").style.left); rightX = ie? leftX + document.all[idMainMenu+"submenu"].offsetWidth : leftX+parseInt(document.getElementById(idMainMenu+"submenu").offsetWidth); leftY = ie? document.all[idMainMenu+"submenu"].style.posTop+ document.all[idMainMenu+"submenu"].offsetHeight : parseInt(document.getElementById(idMainMenu+"submenu").style.top)+parseInt(document.getElementById(idMainMenu+"submenu").offsetHeight); rightY = leftY; } lastMenu = submenu; } function hideAll() { if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;} } function calculateSumOffset(idItem, offsetName) { var totalOffset = 0; var item = eval('idItem'); do { totalOffset += eval('item.'+offsetName); item = eval('item.offsetParent'); } while (item != null); return totalOffset; } function updateIt(e) { if (ie&&!opr6) { var x = window.event.clientX; var y = window.event.clientY; if (x > rightX || x < leftX) hideAll(); elseif (y > rightY) hideAll(); } if (n||ns6) { var x = e.pageX; var y = e.pageY; if (x > rightX || x < leftX) hideAll(); elseif (y > rightY) hideAll(); } } function operahide(){ if (opr6){ if (!MainTable.contains(event.toElement)) hideAll() } } if (ie||ns6) { document.body.onclick=hideAll; document.body.onscroll=hideAll; document.body.onmousemove=updateIt; } if (document.layers) { window.captureEvents(Event.MOUSEMOVE); window.captureEvents(Event.CLICK); window.onmousemove=updateIt; window.onclick=hideAll; } </script> <!-- menucontext.js --> <script language="JavaScript"> function showToolbar() { menu = new Menu(); menu.addItem("Home", "Home", "Home", "index.html", ""); menu.addItem("crypt", "Encryption", "Encryption", null, null); menu.addItem("hash", "Hashing", "Hashing", null, null); menu.addItem("Stegano", "Steganography", "Steganography", "stegano.html", ""); menu.addItem("convert", "Converters", "Converters", null, null); menu.addItem("tools", "Tools", "Tools", null, null); menu.addItem("About", "About", "About", "about.html", ""); menu.addSubItem("crypt", "Caesar Cipher", "Caesar Cipher", "caesar.html", ""); menu.addSubItem("crypt", "RC4", "RC4", "rc4.html", ""); menu.addSubItem("crypt", "RSA-type", "RSA-type", "RSA.html", ""); menu.addSubItem("crypt", "Vigenere Cipher", "Vigenere Cipher", "vigenere.html", ""); menu.addSubItem("crypt", "Playfair", "Playfair", "playfair.html", ""); menu.addSubItem("crypt", "Text Reverser", "Text Reverser", "reverse.html", ""); menu.addSubItem("crypt", "Substitution Cipher", "Substitution Cipher", "substitute.html", ""); menu.addSubItem("crypt", "Modular Transpose", "Modular Transpose", "modular.html", ""); menu.addSubItem("hash", "DES", "DES", "des.html", ""); menu.addSubItem("hash", "RIPEMD-160", "RIPEMD-160", "ripemd-160.html", ""); menu.addSubItem("hash", "MD4 Hash", "MD4 Hash", "md4.html", ""); menu.addSubItem("hash", "MD5 Hash", "MD5 Hash", "md5.html", ""); menu.addSubItem("hash", "SHA-1 Hash", "SHA-1 Hash", "sha1.html", ""); menu.addSubItem("hash", "SHA-256 Hash", "SHA-256 Hash", "sha256.html", ""); menu.addSubItem("convert", "Brainfuck Converter", "Brainfuck Converter", "bf.html", ""); menu.addSubItem("convert", "Unescape Encoder", "Unescape Encoder", "unescape.html", ""); menu.addSubItem("convert", "Binary/ASCII", "Binary/ASCII", "binary.html", ""); menu.addSubItem("convert", "Hex/ASCII", "Hex/ASCII", "hex.html", ""); menu.addSubItem("convert", "Text Reverser", "Text Reverser", "reverse.html", ""); menu.addSubItem("convert", "Morse Code", "Morse Code", "morse.html", ""); menu.addSubItem("convert", "Base64/ASCII", "Base64/ASCI", "base64.html", ""); menu.addSubItem("tools", "Base Converter", "Base Converter", "base.html", ""); menu.addSubItem("tools", "Password Generator", "Password Generator", "passgen.html", ""); menu.showMenu(); } </script> <script language="JavaScript"> showToolbar(); </script> <script language="JavaScript"> function UpdateIt(){ if (ie&&keepstatic&&!opr6) document.all["MainTable"].style.top = document.body.scrollTop; setTimeout("UpdateIt()", 200); } UpdateIt(); </script> </body> </html> 








Related examples in the same category

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Custom Contextual Menu(content sensitive)
12.Drop-Down Menus
13.Menu with sound
14.Menu based on Javascript
15.popup menu (content sensitive menu)
16.Complete Source Code for the Menu
17.Slide out menu
18.Dynamic menu: fly in
19.Menu and submenu
20.Slide out menu with i18N
21.Menu: XP, win 98 style
22.Simple drop-down menu example with layer
23.Build a simple fancy menu
24.Add/delete menu items
25.Customizable layout: customize menu layout
26.Vertical layout menu
27.Easy skinable menu with CSS
28.Menu Item properties
29.Direct link menu
30.Context menu: popup menu
31.Dropdown menu
close