Web-программирование

Четверг, 26.12.2024, 15:17
Приветствую Вас Гость

Web-программирование

Наш опрос

Статистика

Выпадающее меню (Необходимо поместить в файле с меню)

<html>
<head>
<style type="text/css">
@import ../style1.css;
#hardButton {position: absolute; z-index: 80; left: 150px; top: 20px;} 
#hardMenu {position: absolute; z-index: 70; visibility: hidden; left: 150px; top: 40px;} 
</style>
<title>Коллекция Java скриптов. Библиотека JavaScript в примерах. Выпадающее меню на Javascript.</title>

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

Выпадающее при двойном клике в любом месте многоуровневое меню (Кликните два раза мышью в любом месте для появления меню.Необходимо поместить в файле с меню)

<html>
<head>
<title>Выпадающее при двойном клике в любом месте многоуровневое меню</title>
<script language="JavaScript" src="klicmenu.js"></script>

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

<!-- 
//При желании сделать дополнительные основные ссылки меняйте значение menublock[x] на следующую цифру 
//Вы можете ставить ссылки и относительные и полные, изменять значение target.
//*Внимание после | не должно быть пробелов запись "Linse| ../game/linse/linse.htm| _top;" будет неверной и станет причиной ошибок *//
// после последней дополнительной ссылки каждого блока не должно быть знака "+"
var menublock=new Array() 
var plus_i=0 
menublock[0]="Arial;"+ // font mainlink
 // Цвет основной ссылки
 "1;"+ // fontsize mainlink 
 //размер основной ссылки
 "ffff00;"+ // fontcolor mainlink
 // Цвет основной ссылки
 "1;"+ // fontweight mainlink, 1 means bold, 0 means normal
 "Arial;"+ // font sublinks
 // Шрифт дополнительной ссылки
 "1;"+ // fontsize sublinks
 // Размер дополнительной ссылки
 "00ff00;"+ // fontcolor sublinks
 // Цвет дополнительной ссылки
 "0;"+ // fontweight sublinks, 1 means bold, 0 means normal
 "Дополнительные окна|#|;"+ // text|URL|target of mainlink
 "Дополнительное окно приветствия|../win/window12.htm|_top;"+ // text|URL|target of first sublink
 "Дополнительное окно прощания|../win/window14.htm|_top;" // text|URL|target of second sublink 
 
menublock[1]="Arial;"+ // font mainlink
 "1;"+ // fontsize mainlink
 "ffff00;"+ // fontcolor mainlink
 "1;"+ // fontweight mainlink, 1 means bold, 0 means normal
 "Arial;"+ // font sublinks
 "1;"+ // fontsize sublinks
 "00ff00;"+ // fontcolor sublinks
 "0;"+ // fontweight sublinks, 1 means bold, 0 means normal
 "Игры|#|;"+ // text and URL of first mainlink
 "Игровой автомат|../game/bandit/notrun.htm|_top;"+ // text|URL|target of mainlink
 "Морской бой|../game/more.htm|_top;"+ // text|URL|target of first sublink
 "Пятнашки|../game/fift/fift.htm|_top;"+ // text|URL|target of second sublink 
 "Шарики|../game/bubble/bubble.htm|_top;"+ // text|URL|target of thirth sublink 
 "Шашки|../game/checkers.htm|_top;"+ // text|URL|target of fourth sublink 
 "Linse|../game/linse/linse.htm|_top;" // text|URL|target of fourth sublink

menublock[2]="Arial;"+ // font mainlink
 "1;"+ // fontsize mainlink
 "ffff00;"+ // fontcolor mainlink
 "1;"+ // fontweight mainlink, 1 means bold, 0 means normal
 "Arial;"+ // font sublinks
 "1;"+ // fontsize sublinks
 "00ff00;"+ // fontcolor sublinks
 "0;"+ // fontweight sublinks, 1 means bold, 0 means normal
 "Ссылки|#|;"+ // text and URL of mainlink
 "Печатающиеся ссылки|../link/linkpech.htm|_top;"+ // text and URL of thirth sublink 
 "Салют при наведении на ссылку|../link/linksalut.htm|_top;"+ // text and URL of first sublink
 "Смена текста ссылки при наведении курсора|../link/hgnglink.htm|_top;" // text and URL of second sublink
 
// The following block is different. It contains a mainlink without submenus.
// Take care to set the ";;;;" exactly as seen below.
menublock[3]="Arial;"+ // font mainlink
 "1;"+ // fontsize mainlink
 "ffff00;"+ // fontcolor mainlink
 "1;"+ // fontweight mainlink, 1 means bold, 0 means normal
 ";;;;"+ // leave it empty
 "HOME|../|_top;" //* "Текст|URL| место отрытия ссылки (значение target)" *//
 
//* Цвет фона меню (шестизначный код или английское название)*// 
var bgmenu="006600"

//* Ширина меню в пикселях (pixels)*//
var widthmenu=150
 
// No need to change anything below 
// ******************************************************
var menusplit
var urlsplit
var font_weight_main
var font_weight_sub
var font_weight_sub
var showmenu=1
var x,y

var minusimg=new Image()
minusimg.src="../gif/arrow_green.gif"

var plusimg=new Image()
plusimg.src="../gif/arrow_red.gif"
 
var showsubmenus=new Array()
for (i=0;i<=menublock.length-1;i++) {
 showsubmenus[i]=-1
}

var plusminusimg=new Array()
for (i=0;i<=menublock.length-1;i++) {
 plusminusimg[i]=plusimg.src
}

function dblclick() {
 if (document.all && showmenu==1) {
 document.all.menu.style.visibility="visible"
 document.all.menu.style.posLeft=x
 document.all.menu.style.posTop=y
 }
 if (document.layers && showmenu==1) {
 document.menu.visibility="visible"
 document.menu.left=x
 document.menu.top=y
 }
 if (document.all && showmenu!=1) {
 document.all.menu.style.visibility="hidden"
 }
 if (document.layers && showmenu!=1) {
 document.menu.visibility="hidden"
 }
 showmenu=showmenu*-1
}

if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;

if (document.layers){
 document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

function handlerMM(e){
 x = (document.layers) ? e.pageX : event.clientX
 y = (document.layers) ? e.pageY : event.clientY
}
// - End of JavaScript - -->

Выпадающее, при клике на кнопку, многоуровневое меню (Необходимо поместить в файле с меню)

<html>
<head>
<title>Выпадающее многоуровневое меню</title>
<link rel="stylesheet" href="v6.css" type="text/css">
<script language="javascript" src="menu-v6.js"></script>
<script language="javascript" src="sample-v6.js"></script>

Сохраните этот текст, как файл с именем 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 = '<div id="' + itemID + '" style="position:absolute; width:' + itemDimX + '; background-color:' + itemNormal + '; visibility:hidden;"></div>';
 var htmlString = (menuItem[menuNum][itemIndex].type == flagSeparator)?('<table width=' + itemDimX +' height=2 cellpadding=0 cellspacing=0 border=0><tr align=left valign=bottom><td bgcolor=' + upperLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr><tr align=left valign=top><td bgcolor=' + lowerLine + '><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(' + menuNum + ',' + itemIndex + ')" onMouseOver="window.status=' + singleQuote + menuItem[menuNum][itemIndex].description + singleQuote + ';return true;">' + marginString + menuItem[menuNum][itemIndex].name + marginString + '</a></span></td><td><img src="' + subMenuFlag + '" width=4 height=7 border=0 align=right></td></tr></table>');

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 = '<div id="' + menuID + '" style="position:absolute; width:' + menuPadX + '; visibility:hidden;"></div>';
 htmlString = '<table width=' + menuPadX +' height=' + menuPadY + ' cellpadding=0 cellspacing=0 border=' + borderSize + '><tr align=left valign=middle><td></td></tr></table>';

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><tr align=center valign=millde>';
 for (var i = 0; i < menuCount; i++) {
 itemLength = 2 + menuArray[i][0].length;
 menuOffsetX[i] = titleLength * titleWidth;
 htmlStringFG += ('<td width=' + (itemLength * titleWidth) + ' height=' + menuTitleY + '><nobr><span id="titleText"> <a class="menuTitle" href="javascript:openMenu(' + i + ')" onMouseOver="overMenu(' + i + '); window.status=window.defaultStatus; return true;">' + menuArray[i][0] + '</a> </span></nobr></td>');
 titleLength += itemLength;
 }
 menuTitleX = titleLength * titleWidth;
 menuTitleBGX = menuTitleX + borderSize * 2;

htmlStringFG = '<table width=' + menuTitleX + ' height=' + menuTitleY + htmlStringFG + '</tr></table>';

divStringFG = '<div id="' + menuTitleID + '" style="position:absolute; width:' + menuTitleX + '; background-color:' + titleNormal + '; visibility:hidden; z-index:2;"></div>';
 divStringBG = '<div id="' + menuTitleBGID + '" style="position:absolute; width:' + menuTitleBGX + '; visibility:hidden; z-index:1;"></div>';

htmlStringBG = '<table width=' + menuTitleBGX +' height=' + menuTitleBGY + ' cellpadding=0 cellspacing=0 border=' + borderSize + '><tr><td></td></tr></table>';

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 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.narod.ru","JavaScript, CSS и HTML на халяву","http://scriptic.narod.ru/");
myMenu1[4] = new Array("L","GLidia.narod.ru","Персоональный сайт создательницы сайта Scriptic.narod.ru","http://glidia.narod.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.narod.ru","Персоональный сайт создательницы сайта Scriptic.narod.ru","http://GLidia.narod.ru");

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

Выпадающее, при клике на ссылку, многоуровневое меню (Необходимо поместить в файле с меню)

<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>

Сохраните этот текст как файл с именем 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 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 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="' + subMenuFlag + '" 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);

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 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.narod.ru","Персоональный сайт создательницы сайта Scriptic.narod.ru","http://GLidia.narod.ru");

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

Реклама

Отправить заявку

Поиск

Друзья сайта

Создать сайт
Все для веб-мастера
Программы для всех
Мир развлечений
Лучшие сайты Рунета
Кулинарные рецепты
You Directory - add you url for free
Заработок в сети
ввод-вывод WebMoney на Украине
товары для заработка
Каталог прямых ссылок InWind.ru
Белый каталог сайтов
Каталог сайтов
shopings - каталог сайтов интернета
Интернет магазины
Каталог сайтов