Необходимо поместить в файле с меню
Выпадающее многоуровневое меню
Франшиза московское
Сохраните этот текст, как файл с именем
menu-v6
и расширением
js
, в ту же директорию что и файлы, содержащие данное меню.
// Script begins var isIE4 = false; var isNN4 = false; var flagMenu = "M"; var flagLink = "L"; var flagCommand = "C"; var flagSeparator = "S"; var titleWidth = 9; // title character width var titleHeight = 17; // title character height var charWidth = 7; // item character width var charHeight = 15; // item character height var titleNormal = "#cccccc"; // menu title pad color var titleHighlighted = "#006600"; // menu title pad highlighted color var itemNormal = "#009900"; // menu item color var itemHighlighted = "#006600"; // menu highlighted item color var upperLine = "#999999"; // separator upper line color var lowerLine = "#00ff00"; // separator lower line color var borderSize = 1; var marginSize = 4; var marginString = " "; var subMenuFlagSize = 4; var menuHolder = "menuHolder"; var menuOffsetX = new Array(); var menuOffsetY = borderSize * 2 + titleHeight; var menuShown = -1; var itemOn = false; var nnWidth = 0, nnHeight = 0; 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(); function launchCommand(commandString) { eval(commandString); } function launchPage(pageURL) { document.location.assign(pageURL); } function clickMenu(menuNum,itemIndex) { var menuIndex = menuItem[menuNum][itemIndex].myFolder; var folderIndex = menuItem[menuNum][itemIndex].folder; var itemX = menuItem[menuNum][itemIndex].x; var itemY = menuItem[menuNum][itemIndex].y; if (menuItem[menuNum][itemIndex].type == flagMenu) { if (menuFolderSwitch[menuNum][folderIndex]) hideMenu(menuNum,folderIndex) else showMenu(menuNum,folderIndex,itemX + menuWidth[menuNum][menuIndex] * charWidth + subMenuFlagSize,itemY); } else if (menuItem[menuNum][itemIndex].type == flagLink) { closeMenu(menuNum); launchPage(menuItem[menuNum][itemIndex].url); } else if (menuItem[menuNum][itemIndex].type == flagCommand) { closeMenu(menuNum); launchCommand(menuItem[menuNum][itemIndex].command); } } function titleOver() { itemOn = true; if (isIE4) this.style.backgroundColor = titleHighlighted else this.document.bgColor = titleHighlighted; } function titleOut() { itemOn = false; if (isIE4) this.style.backgroundColor = titleNormal else this.document.bgColor = titleNormal; } function mouseOver() { var menuNum = this.menuNum; var itemIndex = this.itemIndex; var menuIndex = menuItem[menuNum][itemIndex].myFolder; var menuLength = menuFolder[menuNum][menuIndex].length; var folderIndex = menuItem[menuNum][itemIndex].folder; var itemX = menuItem[menuNum][itemIndex].x; var itemY = menuItem[menuNum][itemIndex].y; var thisFolder = 0; var thisItem = 0; itemOn = true; if (menuItem[menuNum][itemIndex].type != flagSeparator) { if (isIE4) { this.style.backgroundColor = itemHighlighted; } else if (isNN4) { this.document.bgColor = itemHighlighted; } } for (var i = 0; i < menuLength; i++) { thisItem = menuFolder[menuNum][menuIndex][i]; if (thisItem != itemIndex) if (menuItem[menuNum][thisItem].type == flagMenu) { thisFolder = menuItem[menuNum][thisItem].folder; if (menuFolderSwitch[menuNum][thisFolder]) hideMenu(menuNum,thisFolder); } } if (menuItem[menuNum][itemIndex].type == flagMenu) if (!menuFolderSwitch[menuNum][folderIndex]) showMenu(menuNum,folderIndex,itemX + menuWidth[menuNum][menuIndex] * charWidth + subMenuFlagSize,itemY); window.status = menuItem[menuNum][itemIndex].description; return true; } function mouseOut() { itemOn = false; if (isIE4) this.style.backgroundColor = itemNormal else if (isNN4) this.document.bgColor = itemNormal; window.status = ""; return true; } 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(menuNum,menuName) { var menu = eval(menuName); var menuLength = menu.length var thisFolder = ++menuFolderCount; menuFolder[menuNum][thisFolder] = new Array(); menuFolderSwitch[menuNum][thisFolder] = false; menuWidth[menuNum][thisFolder] = 0; menuLayer[menuNum][thisFolder] = false; menuDone[menuNum][thisFolder] = false; for (var i = 0; i < menuLength; i++) { menuFolder[menuNum][thisFolder][i] = ++menuItemCount; itemLayer[menuNum][menuItemCount] = false; menuItem[menuNum][menuItemCount] = new menuItemUnit(); menuItem[menuNum][menuItemCount].myFolder = thisFolder; menuItem[menuNum][menuItemCount].type = menu[i][0]; menuItem[menuNum][menuItemCount].name = menu[i][1]; menuItem[menuNum][menuItemCount].description = menu[i][2]; if (menuWidth[menuNum][thisFolder] < (menuItem[menuNum][menuItemCount].name.length + marginSize)) menuWidth[menuNum][thisFolder] = menuItem[menuNum][menuItemCount].name.length + marginSize; if (menuItem[menuNum][menuItemCount].type == flagMenu) { menuItem[menuNum][menuItemCount].menu = menu[i][3]; menuItem[menuNum][menuItemCount].folder = menuFolderCount + 1; readMenu(menuNum,menuItem[menuNum][menuItemCount].menu); } else if (menuItem[menuNum][menuItemCount].type == flagLink) { menuItem[menuNum][menuItemCount].url = menu[i][3]; } else if (menuItem[menuNum][menuItemCount].type == flagCommand) { menuItem[menuNum][menuItemCount].command = menu[i][3]; } else if (menuItem[menuNum][menuItemCount].type != flagSeparator) { alert("Error found in " + menuName); } } } function getItem(menuNum,itemIndex,itemDimX,itemDimY,menuIndex) { var thisLayer = null; var subMenuFlag = (menuItem[menuNum][itemIndex].type == flagMenu)?"subMenu.gif":"onePixel.gif"; var singleQuote = "'"; var itemID = "m" + menuNum + "i" + itemIndex + ""; var layerString = '
'; var htmlString = (menuItem[menuNum][itemIndex].type == flagSeparator)?('
'):('
' + marginString + menuItem[menuNum][itemIndex].name + marginString + '
'); if (!itemLayer[menuNum][itemIndex]) { itemLayer[menuNum][itemIndex] = true; if (isIE4) { document.all[menuHolder].insertAdjacentHTML("BeforeEnd",layerString); thisLayer = document.all[itemID]; thisLayer.innerHTML = htmlString; thisLayer.style.zIndex = menuIndex * 2 + 1; thisLayer.onmouseover = mouseOver; if (menuItem[menuNum][itemIndex].type != flagSeparator) thisLayer.onmouseout = mouseOut; } else if (isNN4) { document.layers[itemID] = new Layer(itemDimX,document.layers[menuHolder]); thisLayer = document.layers[itemID]; thisLayer.visibility = "hidden"; thisLayer.document.open(); thisLayer.document.writeln(htmlString); thisLayer.document.close(); thisLayer.document.bgColor = itemNormal; thisLayer.zIndex = menuIndex * 2 + 1; thisLayer.onmouseover = mouseOver; if (menuItem[menuNum][itemIndex].type != flagSeparator) thisLayer.onmouseout = mouseOut; } thisLayer.itemIndex = itemIndex; thisLayer.menuNum = menuNum; } return itemID; } function getMenu(menuNum,menuIndex,menuDimX,menuDimY) { var menuID = "m" + menuNum + "f" + menuIndex + ""; var menuPadX = 0; var menuPadY = 0; var layerString = ""; var htmlString = ""; if (!menuLayer[menuNum][menuIndex]) { menuLayer[menuNum][menuIndex] = true; menuPadX = menuDimX + borderSize * 2; menuPadY = menuDimY + borderSize * 2; layerString = '
'; htmlString = '
'; if (isIE4) { document.all[menuHolder].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[menuHolder]); 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 showTitle(menuArray,menuMaxX,menuMaxY) { var menuCount = menuArray.length; var menuTitleID = "menuTitle"; var menuTitleBGID = "menuTitleBG"; var menuTitleX = 0; var menuTitleY = titleHeight; var menuTitleBGX = 0; var menuTitleBGY = menuTitleY + borderSize * 2; var itemLength = 0; var titleLength = 0; var divStringFG = ""; var divStringBG = ""; var htmlStringFG = ""; var htmlStringBG = ""; var thisLayer = null; htmlStringFG = ' cellpadding=0 cellspacing=0 border=0>
'; for (var i = 0; i < menuCount; i++) { itemLength = 2 + menuArray[i][0].length; menuOffsetX[i] = titleLength * titleWidth; htmlStringFG += ('
' + menuArray[i][0] + '
'); titleLength += itemLength; } menuTitleX = titleLength * titleWidth; menuTitleBGX = menuTitleX + borderSize * 2; htmlStringFG = '
'; divStringFG = '
'; divStringBG = '
'; htmlStringBG = '
'; if (isIE4) { document.all[menuHolder].insertAdjacentHTML("BeforeEnd",divStringBG); document.all[menuTitleBGID].innerHTML = htmlStringBG; document.all[menuHolder].insertAdjacentHTML("BeforeEnd",divStringFG); thisLayer = document.all[menuTitleID]; thisLayer.innerHTML = htmlStringFG; } else if (isNN4) { menuMaxX += menuTitleBGX; menuMaxY += menuTitleBGY; setMenuSize(menuMaxX,menuMaxY); document.layers[menuTitleBGID] = new Layer(menuTitleBGX,document.layers[menuHolder]); thisLayer = document.layers[menuTitleBGID]; thisLayer.visibility = "hidden"; thisLayer.document.open(); thisLayer.document.writeln(htmlStringBG); thisLayer.document.close(); thisLayer.zIndex = 1; document.layers[menuTitleID] = new Layer(menuTitleX,document.layers[menuHolder]); thisLayer = document.layers[menuTitleID]; thisLayer.visibility = "hidden"; thisLayer.document.open(); thisLayer.document.writeln(htmlStringFG); thisLayer.document.close(); thisLayer.document.bgColor = titleNormal; thisLayer.zIndex = 2; } thisLayer.onmouseover = titleOver; thisLayer.onmouseout = titleOut; moveLayerTo(menuTitleBGID,0,0); moveLayerTo(menuTitleID,borderSize,borderSize); showLayer(menuTitleBGID); showLayer(menuTitleID); } 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 moveLayerTo(layerID,x,y) { if (isIE4) { document.all[layerID].style.pixelLeft = x; document.all[layerID].style.pixelTop = y; } else if (isNN4) { document.layers[layerID].left = x; document.layers[layerID].top = y; } } function hideMenu(menuNum,menuIndex) { var menuLength = menuFolder[menuNum][menuIndex].length; var menuID = getMenu(menuNum,menuIndex,0,0); var itemID = ""; var itemIndex = 0; for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[menuNum][menuIndex][i]; if (menuItem[menuNum][itemIndex].type == flagMenu) if (menuFolderSwitch[menuNum][menuItem[menuNum][itemIndex].folder]) hideMenu(menuNum,menuItem[menuNum][itemIndex].folder); itemID = getItem(menuNum,itemIndex,0,0,0); hideLayer(itemID); } hideLayer(menuID); menuFolderSwitch[menuNum][menuIndex] = false; } function showMenu(menuNum,menuIndex,menuX,menuY) { var itemDimY = menuY; var menuLength = menuFolder[menuNum][menuIndex].length; var menuDimX = menuWidth[menuNum][menuIndex] * charWidth + subMenuFlagSize; var menuID = ""; var itemID = ""; var itemIndex = 0; if (menuShown != -1 && menuShown != menuNum) hideMenu(menuShown,0); menuShown = menuNum; if (!menuDone[menuNum][menuIndex]) { for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[menuNum][menuIndex][i]; menuItem[menuNum][itemIndex].x = menuX; menuItem[menuNum][itemIndex].y = itemDimY; itemDimY += (menuItem[menuNum][itemIndex].type != flagSeparator)?charHeight:2; itemID = getItem(menuNum,itemIndex,menuDimX,charHeight,menuIndex); moveLayerTo(itemID,menuItem[menuNum][itemIndex].x,menuItem[menuNum][itemIndex].y); } menuID = getMenu(menuNum,menuIndex,menuDimX,itemDimY-menuY); moveLayerTo(menuID,menuX-borderSize,menuY-borderSize); menuDone[menuNum][menuIndex] = true; } for (var i = 0; i < menuLength; i++) showLayer(getItem(menuNum,menuFolder[menuNum][menuIndex][i],0,0,0)); showLayer(getMenu(menuNum,menuIndex,0,0)); menuFolderSwitch[menuNum][menuIndex] = true; } function getMenuSizeX(menuNum,menuIndex) { var menuLength = menuFolder[menuNum][menuIndex].length; var itemIndex = 0; var thisMenuDimX = menuWidth[menuNum][menuIndex] * charWidth + subMenuFlagSize; var menuDimX = thisMenuDimX; var subMenuDimX = 0; for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[menuNum][menuIndex][i]; if (menuItem[menuNum][itemIndex].type == flagMenu) { subMenuDimX = getMenuSizeX(menuNum,menuItem[menuNum][itemIndex].folder); if (menuDimX < (thisMenuDimX + subMenuDimX)) menuDimX = thisMenuDimX + subMenuDimX; } } return menuDimX; } function getMenuSizeY(menuNum,menuIndex) { var menuLength = menuFolder[menuNum][menuIndex].length; var itemIndex = 0; var menuDimY = 0; var subMenuDimY = 0; var maxSubMenuDimY = 0; for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[menuNum][menuIndex][i]; if (menuItem[menuNum][itemIndex].type == flagMenu) { subMenuDimY = getMenuSizeY(menuNum,menuItem[menuNum][itemIndex].folder); if (maxSubMenuDimY < (menuDimY + subMenuDimY)) maxSubMenuDimY = menuDimY + subMenuDimY; menuDimY += charHeight; } else if (menuItem[menuNum][itemIndex].type == flagSeparator) menuDimY += 2 else menuDimY += charHeight; } if (menuDimY < maxSubMenuDimY) return maxSubMenuDimY else return menuDimY; } function setMenuSize(menuDimX,menuDimY) { document.layers[menuHolder].clip.width=menuDimX; document.layers[menuHolder].clip.height=menuDimY; } function buildMenu(menuArrayName) { isIE4 = document.all; isNN4 = document.layers; var menuArray = eval(menuArrayName); var menuCount = menuArray.length; var menuSizeX = 0; var menuSizeY = 0; var menuMaxX = 0; var menuMaxY = 0; if (isIE4 || isNN4) { for (var i = 0; i < menuCount; i++) { menuItemCount = -1; menuFolderCount = -1; menuItem[i] = new Array(); menuFolder[i] = new Array(); menuFolderSwitch[i] = new Array(); menuWidth[i] = new Array(); itemLayer[i] = new Array(); menuLayer[i] = new Array(); menuDone[i] = new Array(); readMenu(i,menuArray[i][1]); if (isNN4) { menuSizeX = getMenuSizeX(i,0) + borderSize * 2; menuSizeY = getMenuSizeY(i,0) + borderSize * 2; if (menuMaxX < menuSizeX) menuMaxX = menuSizeX; if (menuMaxY < menuSizeY) menuMaxY = menuSizeY; } } if (isNN4) { nnWidth = window.innerWidth; nnHeight = window.innerHeight; window.onResize = reloadMenu; } showTitle(menuArray,menuMaxX,menuMaxY); captureClick(); } } function switchMenu() { if (!itemOn) if (menuShown != -1) closeMenu(menuShown); 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(); } function overMenu(menuNum) { if (menuShown != -1 && menuShown != menuNum) openMenu(menuNum); } function openMenu(menuNum) { if (menuShown == menuNum) closeMenu(menuNum) else showMenu(menuNum,0,borderSize + menuOffsetX[menuNum],borderSize + menuOffsetY); } function closeMenu(menuNum) { menuShown = -1; hideMenu(menuNum,0); } // Script ends
Это файл содержит текст ссылки, ее описание в строке статуса и саму ссылку. Сделав свой файл, сохраните его с именем
sample-v6
и расширением
js
в той же директории. База может быть сгенерирована генератором баз данных для многоуровневых меню
var theMenu = new Array(); theMenu[0] = new Array("menu","myMenu1"); theMenu[1] = new Array("MENU","myMenu2"); 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","Лучшие ссылки","Лучшие ссылки сети","menu23"); myMenu2[4] = new Array("S","","",""); myMenu2[5] = new Array("L","Форма для сообщений","Настроенный почтовик не требуется","../forma.htm"); var menu21 = new Array(); menu21[0] = new Array("L","SUB ITEM 1","this is the first item in this sub menu","the URL of sub item 1"); menu21[1] = new Array("S","","",""); menu21[2] = new Array("L","SUB ITEM 2","this is the second item in this sub menu","the URL of sub item 2"); menu21[3] = new Array("L","SUB ITEM 3","this is the last item in this sub menu","the URL of sub item 3"); var menu22 = new Array(); menu22[0] = new Array("L","SUB ITEM 1","this is the first item in this sub menu","the URL of sub item 1"); menu22[1] = new Array("L","SUB ITEM 2","this is the second item in this sub menu","the URL of sub item 2"); menu22[2] = new Array("S","","",""); menu22[3] = new Array("L","SUB ITEM 3","this is the last item in this sub menu","the URL of sub item 3"); var menu23 = new Array(); menu23[0] = new Array("L","WebSiteGarage.com","Сканирует ваш сайт на предмет качества","http://WebSiteGarage.com"); menu23[1] = new Array("S","","",""); menu23[2] = new Array("L","GLidia.lionovsky.ru","Персоональный сайт создательницы сайта Scriptic.lionovsky.ru","http://GLidia.lionovsky.ru");
Сохраните этот текст как файл с именем
v6
и расширением
css
, в ту же директорию что и файлы, содержащие данное меню.
a.menu {text-decoration:none; color:#000000} a.menuTitle {text-decoration:none; color:#000000} a.menuTitle:hover {text-decoration:none; color:#ffff00} #titleText {font-size:14px; color:#000000; font-family:arial,verdana,courier,times;} #menuText {font-size:12px; color:#000000; font-family:arial,verdana,courier,times;} #menuHolder {position:relative; left:0; top:0; visibility:visible; z-index:1;}