Black Menu : Menu « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.