Black Menu : Menu : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » 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+" -->nn";
  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>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Menu