Выпадающее многоуровневое меню

Выпадающее многоуровневое меню

Необходимо поместить в файле с меню

<html>
<head>
<title>Выпадающее многоуровневое меню</title>
<script language="javascript" src="menu-v4.js"></script>
<link rel=stylesheet href="v4.css" type="text/css">
<script language="javascript" src="sample-v4.js"></script>
</head>
<body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00" onload="buildMenu('theMenu')">
<table cellpadding=0 cellspacing=0 border=0>
<tr align=top>
<td><a href="javascript:openMenu(0)" onMouseOver="overMenu(0); window.status=window.defaultStatus; return true;" onMouseOut="outMenu()">Меню 1</a> <div id="menu1"> </div></td>
<td><a href="javascript:openMenu(1)" onMouseOver="overMenu(1); window.status=window.defaultStatus; return true;" onMouseOut="outMenu()">Меню 2</a> <div id="menu2"> </div></td>
</tr>
</table>
Доска обрезная от 2700 с Севера - <a href="http://myplans.ru/catalog/?section=1" target="_blank">проекты домов из бруса</a>.</body>

</html>

Сохраните этот текст как файл с именем menu-v4 и расширением js, в ту же директорию, что и файлы, содержащие данное меню.

// Script begins

var isIE4 = false;
var isNN4 = false;

var flagMenu = "M";
var flagLink = "L";
var flagCommand = "C";
var flagSeparator = "S";

var charWidth = 7; // character width
var charHeight = 18; // character height
var colorNormal = "#009900"; // menu pad color
var colorHighlighted = "#006600"; // menu highlighted item color
var colorTopLine = "#ffff00"; // separator upper line color
var colorBottomLine = "#ffffff"; // separator lower line color

var borderSize = 1;
var marginSize = 4;
var marginString = "  ";
var subMenuFlagSize = 4;

var menuItemCount = -1;
var menuItem = new Array();
var menuFolderCount = -1;
var menuFolder = new Array();
var menuFolderSwitch = new Array();
var menuWidth = new Array();
var itemLayer = new Array();
var menuLayer = new Array();
var menuDone = new Array();

var itemOn = false;
var nnWidth = 0, nnHeight = 0;

function launchCommand(commandString) {
  // eval(commandString);
  alert(commandString);
}

function launchPage(pageURL) {
  document.location.assign(pageURL);
  //alert(pageURL);
}

function clickMenu(itemIndex) {
  var menuIndex = menuItem[itemIndex].myFolder;
  var folderIndex = menuItem[itemIndex].folder;
  var itemX = menuItem[itemIndex].x;
  var itemY = menuItem[itemIndex].y;

if (menuItem[itemIndex].type == flagMenu) {
    if (menuFolderSwitch[folderIndex])
      hideMenu(folderIndex)
    else
      showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY);
  }
  else if (menuItem[itemIndex].type == flagLink) {
    hideSubMenu();
    launchPage(menuItem[itemIndex].url);
  }
  else if (menuItem[itemIndex].type == flagCommand) {
    hideSubMenu();
    launchCommand(menuItem[itemIndex].command);
  }
}

function mouseOver() {
  var itemIndex = this.itemIndex;
  var menuIndex = menuItem[itemIndex].myFolder;
  var menuLength = menuFolder[menuIndex].length;
  var folderIndex = menuItem[itemIndex].folder;
  var itemX = menuItem[itemIndex].x;
  var itemY = menuItem[itemIndex].y;
  var thisFolder = 0;
  var thisItem = 0;

itemOn = true;

if (menuItem[itemIndex].type != flagSeparator) {
    if (isIE4) {
      this.style.backgroundColor = colorHighlighted;
    }
    else if (isNN4) {
      this.document.bgColor = colorHighlighted;
    }
  }

for (var i = 0; i < menuLength; i++) {
    thisItem = menuFolder[menuIndex][i];

if (thisItem != itemIndex)
      if (menuItem[thisItem].type == flagMenu) {
        thisFolder = menuItem[thisItem].folder;

if (menuFolderSwitch[thisFolder])
          hideMenu(thisFolder);
      }
  }

if (menuItem[itemIndex].type == flagMenu)
    if (!menuFolderSwitch[folderIndex])
      showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY);

window.status = menuItem[itemIndex].description;
  return true;
}

function mouseOut() {
  itemOn = false;

if (isIE4)
    this.style.backgroundColor = colorNormal
  else if (isNN4)
    this.document.bgColor = colorNormal;

window.status = "";
}

function menuItemUnit() {
  this.type = "";
  this.name = "";
  this.description = "";
  this.url = "";
  this.command = "";
  this.menu = "";
  this.folder = -1;
  this.myFolder = -1;
  this.x = -1;
  this.y = -1;
}

function readMenu(menuName) {
  var menu = eval(menuName);
  var menuLength = menu.length
  var thisFolder = ++menuFolderCount;

menuFolder[thisFolder] = new Array();
  menuFolderSwitch[thisFolder] = false;
  menuWidth[thisFolder] = 0;
  menuLayer[thisFolder] = false;
  menuDone[thisFolder] = false;

for (var i = 0; i < menuLength; i++) {
    menuFolder[thisFolder][i] = ++menuItemCount;
    itemLayer[menuItemCount] = false;

menuItem[menuItemCount] = new menuItemUnit();
    menuItem[menuItemCount].myFolder = thisFolder;
    menuItem[menuItemCount].type = menu[i][0];
    menuItem[menuItemCount].name = menu[i][1];
    menuItem[menuItemCount].description = menu[i][2];

if (menuWidth[thisFolder] < (menuItem[menuItemCount].name.length + marginSize))
      menuWidth[thisFolder] = menuItem[menuItemCount].name.length + marginSize;

if (menuItem[menuItemCount].type == flagMenu) {
      menuItem[menuItemCount].menu = menu[i][3];
      menuItem[menuItemCount].folder = menuFolderCount + 1;
      readMenu(menuItem[menuItemCount].menu);
    }
    else if (menuItem[menuItemCount].type == flagLink) {
      menuItem[menuItemCount].url = menu[i][3];
    }
    else if (menuItem[menuItemCount].type == flagCommand) {
      menuItem[menuItemCount].command = menu[i][3];
    }
    else if (menuItem[menuItemCount].type != flagSeparator) {
      alert("Menu Error");
    }
  }
}

function getItem(itemIndex,itemDimX,itemDimY,menuIndex) {
  var thisItem = null;
  var subMenuFlag = (menuItem[itemIndex].type == flagMenu)?"subMenu.gif":"onePixel.gif";
  var singleQuote = "'";
  var itemID = "item" + itemIndex + "";
  var layerString = '<div id="' + itemID + '" style="position:absolute; width:' + itemDimX + '; background-color:' + colorNormal + '; visibility:hidden;"></div>';
  var htmlString = (menuItem[itemIndex].type == flagSeparator)?('<table width=' + itemDimX +' height=2 cellpadding=0 cellspacing=0 border=0><tr align=left valign=bottom><td bgcolor=' + colorTopLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr><tr align=left valign=top><td bgcolor=' + colorBottomLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr></table>'):('<table width=' + itemDimX +' height=' + itemDimY + ' cellpadding=0 cellspacing=0 border=0><tr align=left valign=middle><td nowrap><span id="menuText"><a class="menu" href="javascript:clickMenu(' + itemIndex + ')" onMouseOver="window.status=' + singleQuote + menuItem[itemIndex].description + singleQuote + ';return true;">' + marginString + menuItem[itemIndex].name + marginString + '</a></span></td><td><img src="%27%20%2b%20subMenuFlag%20%2b%20%27.html" width=4 height=7 border=0 align=right></td></tr></table>');

if (!itemLayer[itemIndex]) {
    itemLayer[itemIndex] = true;

if (isIE4) {
      document.body.insertAdjacentHTML("BeforeEnd",layerString);
      thisItem = document.all[itemID];

thisItem.innerHTML = htmlString;
      thisItem.style.zIndex = menuIndex * 2 + 1;

thisItem.onmouseover = mouseOver;
      if (menuItem[itemIndex].type != flagSeparator)
        thisItem.onmouseout = mouseOut;

thisItem.itemIndex = itemIndex;
    }
    else if (isNN4) {
      document.layers[itemID] = new Layer(itemDimX);
      thisItem = document.layers[itemID];

thisItem.visibility = "hidden";
      thisItem.document.open();
      thisItem.document.writeln(htmlString);
      thisItem.document.close();
      thisItem.document.bgColor = colorNormal;
      thisItem.zIndex = menuIndex * 2 + 1;

thisItem.onmouseover = mouseOver;
      if (menuItem[itemIndex].type != flagSeparator)
        thisItem.onmouseout = mouseOut;

thisItem.itemIndex = itemIndex;
    }
  }

return itemID;
}

function getMenu(menuIndex,menuDimX,menuDimY) {
  var menuID = "menu" + menuIndex + "";
  var menuPadX = menuDimX + borderSize * 2;
  var menuPadY = menuDimY + borderSize * 2;
  var layerString = '<div id="' + menuID + '" style="position:absolute; width:' + menuPadX + '; visibility:hidden;"></div>';
  var htmlString = '<table width=' + menuPadX +' height=' + menuPadY + ' cellpadding=0 cellspacing=0 border=' + borderSize + '><tr align=left valign=middle><td></td></tr></table>';

if (!menuLayer[menuIndex]) {
    menuLayer[menuIndex] = true;

if (isIE4) {
      document.body.insertAdjacentHTML("BeforeEnd",layerString);

document.all[menuID].innerHTML = htmlString;
      document.all[menuID].style.zIndex = menuIndex * 2;
    }
    else if (isNN4) {
      document.layers[menuID] = new Layer(menuPadX);

document.layers[menuID].visibility = "hidden";
      document.layers[menuID].zIndex = menuIndex * 2;
      document.layers[menuID].document.open();
      document.layers[menuID].document.writeln(htmlString);
      document.layers[menuID].document.close();
    }
  }

return menuID;
}

function showLayer(layerID) {
  if (isIE4)
    document.all[layerID].style.visibility = "visible"
  else if (isNN4)
    document.layers[layerID].visibility = "show";
}

function hideLayer(layerID) {
  if (isIE4)
    document.all[layerID].style.visibility = "hidden"
  else if (isNN4)
    document.layers[layerID].visibility = "hidden";
}

function hideMenu(menuIndex) {
  var menuLength = menuFolder[menuIndex].length;
  var menuID = getMenu(menuIndex,0,0);
  var itemID = "";
  var itemIndex = 0;

for (var i = 0; i < menuLength; i++) {
    itemIndex = menuFolder[menuIndex][i];

if (menuItem[itemIndex].type == flagMenu)
      if (menuFolderSwitch[menuItem[itemIndex].folder])
        hideMenu(menuItem[itemIndex].folder);

itemID = getItem(itemIndex,0,0,0);
    hideLayer(itemID);
  }

hideLayer(menuID);

menuFolderSwitch[menuIndex] = false;
}

function hideSubMenu() {
  var menuLength = menuFolder[0].length;

for (var i = 0; i < menuLength; i++) {
    itemIndex = menuFolder[0][i];

if (menuItem[itemIndex].type == flagMenu) {
      if (menuFolderSwitch[menuItem[itemIndex].folder])
        hideMenu(menuItem[itemIndex].folder);
    }
  }
}

function showMenu(menuIndex,menuX,menuY) {
  var itemDimY = menuY;
  var menuLength = menuFolder[menuIndex].length;
  var menuDimX = menuWidth[menuIndex] * charWidth + subMenuFlagSize;
  var menuID = "";
  var itemID = "";
  var itemIndex = 0;

if (!menuDone[menuIndex]) {
    for (var i = 0; i < menuLength; i++) {
      itemIndex = menuFolder[menuIndex][i];

menuItem[itemIndex].x = menuX;
      menuItem[itemIndex].y = itemDimY;
      itemDimY +=  (menuItem[itemIndex].type != flagSeparator)?charHeight:2;

itemID = getItem(itemIndex,menuDimX,charHeight,menuIndex);

moveLayerTo(itemID,menuItem[itemIndex].x,menuItem[itemIndex].y);
    }

menuID = getMenu(menuIndex,menuDimX,itemDimY-menuY);
    moveLayerTo(menuID,menuX-borderSize,menuY-borderSize);

menuDone[menuIndex] = true;
  }

for (var i = 0; i < menuLength; i++)
    showLayer(getItem(menuFolder[menuIndex][i],0,0,0));

showLayer(getMenu(menuIndex,0,0));

menuFolderSwitch[menuIndex] = true;
}

function buildMenu(menuName,x,y) {
  isIE4 = document.all;
  isNN4 = document.layers;

if (isIE4 || isNN4) {
    if (isNN4) {
      nnWidth = window.innerWidth;
      nnHeight = window.innerHeight;
      window.onResize = reloadMenu;
    }

readMenu(menuName);
    showMenu(0,x,y);
    captureClick();
  }
}

function switchMenu(e) {
  if (!itemOn)
    hideSubMenu();

if (isNN4) {
    routeEvent(e);
  }

return true;
}

function captureClick() {
  if (isIE4)
    document.onclick = switchMenu;
  else {
    document.onClick = switchMenu;
    document.captureEvents(Event.CLICK);
  }
}

function reloadMenu() {
  if (nnWidth != window.innerWidth || nnHeight != window.innerHeight)
    document.location.reload();
}

// Script ends

Это файл содержит текст ссылки, ее описание в строке статуса и саму ссылку. Сделав свой файл, сохраните его с именем sample-v4 и расширением js в той же директории. База может быть сгенерирована генератором баз данных для многоуровневых меню

var theMenu = new Array();
theMenu[0] = new Array("myMenu1","menu1");
theMenu[1] = new Array("myMenu2","menu2");

var myMenu1 = new Array();
myMenu1[0] = new Array("M","HTML","this is the first sub menu","menu11");
myMenu1[1] = new Array("M","CSS","Описание как сделать сайт красивее и привлекательнее","menu12");
myMenu1[2] = new Array("S","","","");
myMenu1[3] = new Array("L","Scriptic.lionovsky.ru","JavaScript, CSS и HTML на халяву","/");
myMenu1[4] = new Array("L","GLidia.lionovsky.ru","Персоональный сайт создательницы сайта Scriptic.lionovsky.ru","http://glidia.lionovsky.ru");
myMenu1[5] = new Array("M","Java-скрипты","Огромная коллекция для свободного использования","menu13");
myMenu1[6] = new Array("S","","","");
myMenu1[7] = new Array("L","Гостевая","Напишите о достоинствах или недостатках","http://narod.yandex.ru/guestbook/?owner=3083811&mainhtml=gosti.txt&messageshtml=style.txt");

var menu11 = new Array();
menu11[0] = new Array("L","Спецсимволы HTML","Таблица спецсимволов HTML","../html/symbol.htm");
menu11[1] = new Array("S","","","");
menu11[2] = new Array("L","Основные тэги HTML","Таблица основных тэгов HTML и их атрибутов","../html/teg.htm");
menu11[3] = new Array("L","Таблица цветов","RBG-палитра 216 цветов","../html/color1.htm");

var menu12 = new Array();
menu12[0] = new Array("L","Полосы прокрутки","Изменение цвета полос прокрутки","../css/scroling.htm");
menu12[1] = new Array("L","Изменение вида курсора","Изменение вида курсора на один из стандартных","../css/vidcursor.htm");
menu12[2] = new Array("S","","","");
menu12[3] = new Array("L","Введение в CSS","Введение в CSS (рекомендую прочитать новичкам)","../css/css4.htm");

var menu13 = new Array();
menu13[0] = new Array("L","Музыка","Музыкальные шкатулки (незабудьте включить колонки)","../muz.htm");
menu13[1] = new Array("L","Игры","Морской бой, Пятнашки, Шарики, Шашки, Linse","../game.htm");
menu13[2] = new Array("S","","","");
menu13[3] = new Array("L","Ссылки","Различные эффекты применяемые к ссылкам","../linki.htm");

var myMenu2 = new Array();
myMenu2[0] = new Array("L","Ссылки","Ссылки на другие ресурсы","../scilki.htm");
myMenu2[1] = new Array("L","Обмен ссылками","Форма для обмена ссылками","../formular.htm");
myMenu2[2] = new Array("S","","","");
myMenu2[3] = new Array("M","Лучшие ссылки","Лучшие ссылки сети","menu21");
myMenu2[4] = new Array("S","","","");
myMenu2[5] = new Array("L","Форма для сообщений","Настроенный почтовик не требуется","../forma.htm");

var menu21 = new Array();
menu21[0] = new Array("L","WebSiteGarage.com","Сканирует ваш сайт на предмет качества","http://WebSiteGarage.com");
menu21[1] = new Array("S","","","");
menu21[2] = new Array("L","GLidia.lionovsky.ru","Персоональный сайт создательницы сайта Scriptic.lionovsky.ru","http://GLidia.lionovsky.ru");

Сохраните этот текст как файл с именем v4 и расширением css, в ту же директорию, что и файлы, содержащие данное меню.