ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Сложное двухуровневое меню

Сложное двухуровневое меню

А теперь рассмотрим создание сложного двухуровневого меню, которое полностью генерируется сценарием. Код сценария будет более универсальным и оформлено в виде двух файлов с расширением js.

  • Файл menu_prm.js хранит параметры меню. При создании приложений его содержимое можно изменять в зависимости от конкретных задач. В этом файле определяются названия опций и действия для них, цвет и другие параметры. Это переменная(настраиваемая) часть описания меню.
  • Файл menu_blb.js содержит описание механизма построения и функционирования меню. В нем используются параметры, определенные в первом файле. Это постоянная часть описания меню. Содержимое данного файла можно корректировать по своему усмотрению.

Рассмотрим пример, в котором главное (горизонтальное) меню содержит три опции, первым двум из которых соответствуют вертикальные подменю. Последняя опция является терминальной. Названия опций выбраны так, чтобы можно легко понять, что к чему относится.

В первом файле задаются параметры цвета, шрифта, а также состав названий опций, действия и координаты. Названия опций меню, их позиционирование, действия и содержание статусной строки задаются с помощью массивов. Структура меню определяется двухмерным массивом.

Внимание! Если действие представляет собой не URL-адрес, а код на JavaScript, то он должен начинаться с префикса "javascript: ", за которым следует выражения, разделенные точкой с запятой.

Во втором файле определен ря функций, с помощью которых меню разворачивается и работает. Отображение меню происходит на основе HTML-тегов, определяющих таблицы. Фрагменты HTML-кода, из которых складываются генерирующие строки HTML-документа, определены в виде элементов массива. Позиционирование меню производится с помощью параметров top и left таблицы стилей, которая также генерируется сценарием. Среди множества функций, определенных в этом файле, имеется главная buildMenu(). Вызов ее в сценарии, расположенном в HTML-документе, выводит меню в окно браузера вместе с другими элементами этого документа.

Пишем код файла menu_prm.js с определением параметров меню.

// JavaScript Document
// Параметры меню
// Цвета:
var clBorder = 'blue' //цвет рамки
var clBgInact = "#83d6f5" //цвет фона
var clBgAct = '#d6f4fe' //цвет подсветки
var clFnInact = 'blue' // цвет надписи обычной
var clFnAct = 'black' // цвет надписи при подсветке
// Шрифт (параметры стиля):
var cFontSize='18' // размер
var cFontFamily='times' // семейство
// Другие параметры:
var closeTimeout = 500 // время задержки свертывания подменю, мс
var selfPos = false //автоматическое позиционирование опций меню и подменю (если true, то задаются координаты только первого меню)
// Собственно меню
var menu = new Array()
menu[0] = new Array()
//Параметры меню: имя, URL, статусная строка, left, top, width; подменю: left,top, width
menu[0][0] = new Array("Меню 1","","Выберите что-нибудь из подменю",50,100,80,50,120,120)
menu[0][1] = new Array("Подменю 1.1","javascript:history.go(-1)","Назад")
menu[0][2] = new Array("Подменю 1.2","http://www.yandex.ru","Яндекс")
menu[0][3] = new Array("Подменю 1.3","javascript:alert('Привет!')","Окно с сприветствием")
menu[1] = new Array()
menu[1][0] = new Array("Меню 2","","",130,100,80,130,120,0)
menu[1][1] = new Array("Подменю 2.1","","")
menu[1][2] = new Array("Подменю 2.2","","")
menu[2] = new Array()
menu[2][0] = new Array("Меню 3","http://www.chat.ru","CHAT.RU",210,100,80,0,0,0)

Пишем код файла menu_blb.js.

// JavaScript Document
var ie = document.all ? true : false
var overBox = ''
var timerID

// Заготовки элементов HTML-кода
var barHtml = new Array()
barHtml[0] = '<DIV ID="divbarpos'
barHtml[1] = '" STYLE="position:absolute;left:'
barHtml[2] = 'px;top:'
barHtml[3] = 'px;" onmouseover="openbox('
barHtml[4] = ')" onmouseout="closebox('
barHtml[5] = ')" onclick="clickbox('
barHtml[6] = ')"><TABLE CELLPADDING=0 CELLSPACING=0><TR><TD BGCOLOR="'
barHtml[7] = '"><TABLE CELLPADDING="0" CELLSPACING="1" BORDER="0"><TR><TD CLASS="mnubarpos" ID="mnubarpos'
barHtml[8] = '" WIDTH="'
barHtml[9] = '" BGCOLOR="'
barHtml[10] = '" STYLE="color:'
barHtml[11] = ';font-size:'+cFontSize+';font-family:'+cFontFamily+';">'

barHtml[12] = '</TD></TR></TABLE></TD></TR></TABLE></DIV>'
var boxHtml = new Array()
boxHtml[0] = '<DIV ID="divbox'
boxHtml[1] = '" STYLE="position:absolute;visibility:hidden;left:'
boxHtml[2] = 'px;top:'
boxHtml[3] = 'px;font-family:'+cFontFamily+'" onmouseout="closebox('
boxHtml[4] = ')"><TABLE CELLPADDING=0 CELLSPACING=0><TR><TD BGCOLOR="'
boxHtml[5] = '"><TABLE CLASS="mnubox" ID="mnubox'
boxHtml[6] = '" CELLPADDING="0" CELLSPACING="1" BORDER="0" >'

boxHtml[7] = '<SPAN ID="divboxpos'
boxHtml[8] = '" onmouseover="openboxpos('
boxHtml[9] = ')" onmouseout="closeboxpos('
boxHtml[10] = ')" onclick="clickboxpos('
boxHtml[11] = ')"><TR><TD CLASS="mnuboxpos" ID="mnuboxpos'
boxHtml[12] = '" WIDTH="'
boxHtml[13] = '" BGCOLOR="'
boxHtml[14] = '" STYLE="color:'
boxHtml[15] = ';font-size:'+cFontSize+'">'

boxHtml[16] = '</TD></TR></SPAN>'
boxHtml[17] = '</TABLE></TD></TR></TABLE></DIV>'

function buildMenu() { // построение меню
if (ie) {
buildMenuBar();
buildSubMenu();
if (selfPos) PosMenu();
ResizeSubMenu();
}
}

function buildMenuBar() { // построение горизонтального меню
for (i = 0; i < menu.length; i++){
var s = barHtml[0] + i + barHtml[1] + menu[i][0][3] + barHtml[2] + menu[i][0][4] +
barHtml[3] + i + barHtml[4] + i + barHtml[5] + i + barHtml[6] + clBorder + barHtml[7] + i +
barHtml[8] + menu[i][0][5] + barHtml[9] + clBgInact + barHtml[10] + clFnInact +
barHtml[11] + menu[i][0][0] + barHtml[12];
document.writeln(s);
}
}

function buildSubMenu() { // построение подменю
for (i = 0; i < menu.length; i++){
if (menu[i].length > 1) {
var s = boxHtml[0] + i + boxHtml[1] + menu[i][0][6] + boxHtml[2] + menu[i][0][7] +
boxHtml[3] + i + boxHtml[4] + clBorder + boxHtml[5] + i + boxHtml[6]
for (j = 1; j < menu[i].length; j++) {
var s1 = i + ',' + j
var s2 = i + '_' + j
s += boxHtml[7] + s2 + boxHtml[8] + s1 + boxHtml[9] + s1 + boxHtml[10] + s1 +
boxHtml[11] + s2 + boxHtml[12] + menu[i][0][8] + boxHtml[13] + clBgInact +
boxHtml[14] + clFnInact + boxHtml[15] + menu[i][j][0] + boxHtml[16]
}
s += boxHtml[17]
document.writeln(s)
}
}
}

function PosMenu() {
for (i = 0; i < menu.length; i++) {
barCurr = document.all['divbarpos' + i]
if (i > 0) {
barPrev = document.all['divbarpos' + (i - 1)]
barCurr.style.left = barPrev.offsetLeft + barPrev.offsetWidth - 1
}
if (menu[i].length > 1) {
boxCurr = document.all['divbox' + i]
boxCurr.style.pixelTop = barCurr.offsetTop + barCurr.offsetHeight - 1
boxCurr.style.pixelLeft = barCurr.offsetLeft
}
}
}

function ResizeSubMenu() {
for (i = 0; i < menu.length; i++) {
if (menu[i].length > 1 && menu[i][0][8] <= 0) {
el = document.all['mnubox' + i]
w = document.all['divbarpos' + i].offsetWidth
if (el.offsetWidth < w) el.style.width = w
}
}
}

function openbox(x) {
paintLayer('mnubarpos' + x, active = true)
showLayer('divbox' + x)
for (i = 0; i < menu.length; i++) if (i != x) closebox(i, 0)
overBox = 'divbox' + x
window.status = menu[x][0][2]
}

function closebox(x, timeout) {
paintLayer('mnubarpos' + x, active = false)
clearTimeout(timerID)
if (timeout == 0) hideLayer('divbox' + x)
else timerID = setTimeout('hideLayer("divbox' + x + '")', closeTimeout)
overBox = ''
window.status = defaultStatus
}

function clickbox(x) {
clickMenu(menu[x][0][1])
}

function openboxpos(x, y) {
paintLayer('mnuboxpos' + x + '_' + y, active = true)
overBox = 'divbox' + x
window.status = menu[x][y][2]
}

function closeboxpos(x, y) {
window.status = defaultStatus
paintLayer('mnuboxpos' + x + '_' + y, active = false)
}

function clickboxpos(x, y) {
clickMenu(menu[x][y][1])
}

function clickMenu(s) {
if (s.indexOf('javascript:') == 0) eval(s);
else if (s != '') window.location.href = s;
}

function paintLayer(layerID, active) {
if (layer = document.all[layerID]) {
if (active) { clBg = clBgAct; clFn = clFnAct }
else { clBg = clBgInact; clFn = clFnInact }
layer.style.backgroundColor = clBg
layer.style.color = clFn
}
}

function showLayer(layerID) {
if (layer = document.all[layerID]) layer.style.visibility = 'visible'
}

function hideLayer(layerID) {
if (layer = document.all[layerID] && (overBox != layerID)) document.all[layerID].style.visibility = 'hidden'
}

Чтобы создать меню, в HTML-документе пишем следующие строки:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Сложное двухуровневое меню</title>
<script src="menu_prm.js"type="text/javascript"></script>
<script src="menu_bld.js" type="text/javascript"></script>
<script type="text/javascript">buildMenu()</script>
</head>

<body>
</body>
</html>

Здесь buildMenu() – функция определение которой находится в файле menu_blb.js. Она выводит на экран меню в соответствии с параметрами, заданными в файле menu_prm.js.

В окне веб-браузера это будет выглядеть ТАК.