Black Menu : Menu « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Menu 
Black Menu

<html>
  <head>
    <!--
      CryptoMX Tools
      Copyright (C2004 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 optionany 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=//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 (iethis.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||ns6HTMLstr += "<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 (nHTMLstr += "<td>&nbsp;";
  HTMLstr += "<!-- MAIN MENU STARTS -->\n";
  HTMLstr += "<!-- MAIN_MENU -->\n";
  HTMLstr += "<!-- MAIN MENU ENDS -->\n";
  if (nHTMLstr += "</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||ns6HTMLstr+= "</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||ns6MENUitem = "<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 != submenuhideAll();
    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;
  else if (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 != submenuhideAll();

    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 < leftXhideAll();
    else if (y > rightYhideAll();
  }
  if (n||ns6)
  {
    var x = e.pageX;
    var y = e.pageY;

    if (x > rightX || x < leftXhideAll();
    else if (y > rightYhideAll();
  }
}

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
w_w_w__.__j_av__a__2_s_.c___o__m__ | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.