Текстовое двухуровневое выпадающее меню как в Windows меню "Пуск"
Данный скрипт работает корректно только в IE4+
Реализацию данного скрипта вы можете увидеть ниже.
Реализацию горизонтального меню вы можете увидеть здесь.
<html;> <head;> <title;>JavaPortal;</title> <style;> .menu { font-size: 12pt; font-weight: bold; text-align: center; text-decoration: none; cursor: hand; border: none; } </style> <SCRIPT; language="JavaScript"> <!-- //Author: Yura Ladik [email protected] //1. Переменные var cBorder = 'f0fff0'//Цвет рамки var cBg = '#006000' //Цвет фона var cBgAct = 'lightgrey' //Цвет фона активного меню var cFont = 'white' //Цвет шрифта var cFontAct = 'red' //Цвет шрифта активного меню var closeTimeout = 500 // задержка на закрытие подменю var menuLeft=15//Положение меню по X var menuTop=150//Положение меню по y var orientation="vertical"//Тип меню: вертикальный (vertical) или горизонтальный(horizontal) var cellp=10//Отстум надписи в меню var cellpChild=2//Отступ подменю от меню var timerID //Таймер var overChildMenu = ''//используется для запоминания текущего подменю //--------------------------------- //2. Создаём массив описывающий меню. var menu = new Array() menu[0] = new Array() menu[0][0] = new Array("Новости","/news/news.html","Новости проекта") menu[1] = new Array() menu[1][0] = new Array("О проекте","/project.html","О проекте") menu[2] = new Array() menu[2][0] = new Array("Рассылки","/subs/subs.html","Рассылки") menu[3] = new Array() menu[3][0] = new Array("Связь с нами","/link.html","Связь с нами") menu[4] = new Array() menu[4][0] = new Array("Java","","Всё о Java")//Название, URL, описание menu[4][1] = new Array("Апплеты","/java/applets/applets.html","Коллекция Java апплетов") menu[4][2] = new Array("Вопрос-ответ","/java/faq/faq.html","FAQ по Java") menu[4][3] = new Array("Классы","/java/class/class.html","Описание Java классов") menu[4][4] = new Array("Конференция","/conference/conference.html","Конференция по Java") menu[4][5] = new Array("Примеры","/java/examples/examples.html","Примеры Java") menu[4][6] = new Array("Статьи","/java/articles/articles.html","Статьи по Java") menu[5] = new Array() menu[5][0] = new Array("JavaScript","","Всё о JavaScript")//Название, URL, описание menu[5][1] = new Array("Вопрос-ответ","/javaScript/faq/faq.html","FAQ по JavaScript") menu[5][2] = new Array("Конференция","/conference/conference.html","Конференция по JavaScript") menu[5][3] = new Array("Примеры","/javaScript/examples/examples.html","Примеры JavaScript") menu[5][4] = new Array("Статьи","/javaScript/articles/articles.html","Статьи по JavaScript") menu[6] = new Array() menu[6][0] = new Array("Разное ","","Всего помаленьку") menu[6][1] = new Array("Словарь терминов","/dictionary/dictionary.html","Словарь терминов") menu[6][2] = new Array("Статьи","/articles/articles.html","Статьи") //--------------------------------- //3. Пишем в документ структуру меню for(i=0;i<menu.length;i++) { document.write('<div; id="divMenu'+i+ '" style="position:absolute;" onmouseover="openMenu('+i+ ')" onmouseout="closeMenu('+i+')" onclick="clickMenu('+i+')">') document.write('<table; cellpadding=0 cellspacing=0><tr;><td; bgcolor="'+cBorder+ '"><table; cellpadding="0" cellspacing="1" border="0"><TR;><TD; class="menu" id="tabMenu'+i+ '" bgcolor="'+cBg+'" style="color:'+cFont+';">') document.write(menu[i][0][0]+'</td></tr></table></td></tr></table></div>') if (menu[i].length > 1) { document.write('<div; id="divChildMenu'+i+'" style="position:absolute;visibility:hidden;" onmouseout="closeMenu('+i+ ')"><table; cellpadding=0 cellspacing=0><tr;><td; bgcolor="'+cBorder+ '"><table; class="menu" id="tabChildMenu'+i+'" cellpadding="0" cellspacing="1" border="0">') for(j=1;j<menu;[i].length;j++) { document.write('<span; id="spanChildMenu'+i+'a'+j+ '" onmouseover="openChildMenu('+i+','+j+ ')" onmouseout="closeChildMenu('+i+','+j+')" onclick="clickChildMenu('+i+','+j+ ')"><tr;><td; class="menu" ID="tabChildMenu'+i+'a'+j+'" bgcolor="'+cBg+'" style="color:' +cFont+';">') document.write(menu[i][j][0]) document.write('</td></tr></SPAN>') } document.write('</TABLE></td></tr></table></div>') } } //--------------------------------- //4. Производим конфигурирование меню a=document.all['divMenu0'] a.style.pixelLeft=menuLeft; a.style.pixelTop=menuTop; document.all['tabMenu0'].style.width=document.all['tabMenu0'].offsetWidth+cellp wh1=0; if(orientation=="horizontal") { if(menu[0].length>1;) { document.all['divChildMenu0'].style.pixelTop=a.style.pixelTop+a.offsetHeight+cellpChild document.all['divChildMenu0'].style.pixelLeft=a.style.pixelLeft } for(i=1;i<menu.length;i++) { a=document.all['divMenu' + i] document.all['tabMenu'+i].style.width=document.all['tabMenu'+i].offsetWidth+cellp wh1+=document.all['divMenu' + (i-1)].offsetWidth-1 a.style.pixelTop=menuTop a.style.pixelLeft=menuLeft+wh1 if(menu[i].length>1;) { document.all['divChildMenu' + i].style.pixelTop=a.style.pixelTop+a.offsetHeight +cellpChild document.all['divChildMenu' + i].style.pixelLeft=a.style.pixelLeft } } } else if(orientation=="vertical") { ww1=document.all['tabMenu0'].offsetWidth for(i=1;i<menu.length;i++) { a=document.all['divMenu' + i] document.all['tabMenu'+i].style.width=document.all['tabMenu'+i].offsetWidth+cellp wh1+=document.all['divMenu' + (i-1)].offsetHeight-1 a.style.pixelTop=menuTop+wh1 a.style.pixelLeft=menuLeft if(document.all['tabMenu'+i].offsetWidth>ww1;)ww1=document.all['tabMenu'+i].offsetWidth } for(i=0;i<menu.length;i++) { document.all['tabMenu'+i].style.width=ww1 a=document.all['divMenu' + i] if(menu[i].length>1;) { document.all['divChildMenu' + i].style.pixelTop=a.style.pixelTop document.all['divChildMenu' + i].style.pixelLeft=a.style.pixelLeft+a.offsetWidth +cellpChild } } } //--------------------------------- //5. Функция открытия меню function openMenu(x) { paintLayer('tabMenu' + x, active = true) showLayer('divChildMenu' + x) for (i = 0; i < menu.length; i++) if (i != x) closeMenu(i, 0) overChildMenu = 'divChildMenu' + x window.status = menu[x][0][2] } //--------------------------------- //6. Функция закрытия меню function closeMenu(x, timeout) { paintLayer('tabMenu' + x, active = false) clearTimeout(timerID) if (timeout == 0) hideLayer('divChildMenu' + x) else timerID = setTimeout('hideLayer("divChildMenu' + x + '")', closeTimeout) overChildMenu = '' window.status = defaultStatus } //--------------------------------- //7. Функция закраски меню function paintLayer(layerID, active) { if (layer = document.all[layerID]) { if (active) { clBg = cBgAct; clFn = cFontAct } else { clBg = cBg; clFn = cFont } layer.style.backgroundColor = clBg layer.style.color = clFn } } //--------------------------------- //8. Функция открытия подменю function openChildMenu(x, y) { paintLayer('tabChildMenu' + x + 'a' + y, active = true) overChildMenu = 'divChildMenu' + x window.status = menu[x][y][2] } //--------------------------------- //9. Функция закрытия подменю function closeChildMenu(x, y) { window.status = defaultStatus paintLayer('tabChildMenu' + x + 'a' + y, active = false) } //--------------------------------- //10. Функция показывающая подменю function showLayer(layerID) { if (layer = document.all[layerID]) layer.style.visibility = 'visible' } //--------------------------------- //11. Функция убирающая подменю function hideLayer(layerID) { if (layer = document.all[layerID] && (overChildMenu != layerID)) document.all[layerID].style.visibility = 'hidden' } //--------------------------------- //12. Функция обрабатывающая нажатие на основное меню function clickMenu(x) { openHref(menu[x][0][1]) } //--------------------------------- //13. Функция обрабатывающая нажатие на подменю function clickChildMenu(x,y) { openHref(menu[x][y][1]) } //--------------------------------- //14. Функция перехода по ссылке function openHref(s) { if (s.indexOf('javascript:') == 0) eval(s); else if (s != '') window.location.href = s; } //--> </script> </head> <body; bgColor="#ffffff"> </body> </html>
Давайте рассмотрим всё по пунктам.
1. Переменные
Здесь мы описываем все необходимые переменные, они будут доступны по всему документу.
var cBorder = 'f0fff0' - цвет рамки
var cBg = '#006000' - цвет фона
var cBgAct = 'lightgrey' - цвет фона активного меню
var cFont = 'white' - цвет шрифта
var cFontAct = 'red' - цвет шрифта активного меню
var closeTimeout = 500 - задержка на закрытие подменю
var menuLeft=15 - положение меню по X
var menuTop=150 - положение меню по y
var orientation="vertical" - тип меню: вертикальный (vertical) или горизонтальный(horizontal)
var cellp=10 - отступ надписи в меню
var cellpChild=2 - отступ подменю от меню
var timerID - таймер
var overChildMenu = '' - используется для запоминания текущего подменю
2. Создаём массив описывающий меню.
Здесь мы указываем состав нашего меню. Делаем это следующим образом:
Создаём массив
var menu = new Array() menu[0] = new Array() menu[0][0]= new Array("Название раздела 0","Ссылка(если надо)","Описание ") menu[0][1]= new Array("Название подраздела 1","Ссылка(если надо)","Описание ") menu[0][2]= new Array("Название подраздела 2","Ссылка(если надо)","Описание ") … menu[0][j]= new Array("Название подраздела j","Ссылка(если надо)","Описание ") … menu[i] = new Array() menu[i][0]= new Array("Название раздела i","Ссылка(если надо)","Описание ") menu[i][1]= new Array("Название подраздела 1","Ссылка(если надо)","Описание ") menu[i][2]= new Array("Название подраздела 2","Ссылка(если надо)","Описание ") … menu[i][j]= new Array("Название подраздела j","Ссылка(если надо)","Описание ")
Получается двухуровневое меню с неограниченным количеством разделов и подразделов.
3. Пишем в документ структуру меню
В цикле по i создаём разделы меню в виде элемента <div;> и двух таблиц за счет которых получаем рамку.
В цикле по j создаём подразделы меню в виде элементов <div;> и <span;> и двух таблиц за счет которых получаем рамку.
4. Производим конфигурирование меню
В данном отрывке кода мы организуем меню в зависимости от значения переменной orientation – вертикально или горизонтально. И если меню располагается вертикально, то производим выравнивание всех разделов меню по ширине.
Реализацию с горизонтальным расположением можно посмотреть тут.
5. Функция открытия меню
function closeMenu(x, timeout)
Делаем раздел меню активным:paintLayer('tabMenu' + x, active = true)Показываем подменю:
showLayer('divChildMenu' + x)Закрываем все разделы меню открытые ранее:
for (i = 0; i < menu.length; i++) if (i != x) closeMenu(i, 0)В строке статуса пишем описание раздела:
window.status = menu[x][0][2] }
6. Функция закрытия меню
function closeMenu(x, timeout)
Делаем раздел меню не активным:paintLayer('tabMenu' + x, active = false)Устанавливает таймер закрытия подменю:
clearTimeout(timerID) setTimeout('hideLayer("divChildMenu' + x + '")', closeTimeout)В строке статуса пишем значение установленное по умолчанию:
window.status = defaultStatus
7. Функция закраски меню
function paintLayer(layerID, active)
Если active true устанавливаем цвета активного меню:if (active) { clBg = cBgAct; clFn = cFontAct }Если active false устанавливаем цвета не активного меню:
else { clBg = cBg; clFn = cFont } layer.style.backgroundColor = clBg layer.style.color = clFn }
8. Функция открытия подменю
function openChildMenu(x, y)
Делаем подраздел меню активным:paintLayer('tabChildMenu' + x + 'a' + y, active = true)В строке статуса пишем описание подраздела:
window.status = menu[x][y][2] }
9. Функция закрытия подменю
function closeChildMenu(x, y)
В строке статуса пишем значение установленное по умолчанию:window.status = defaultStatusДелаем подраздел меню не активным:
paintLayer('tabChildMenu' + x + 'a' + y, active = false)
10. Функция показывающая подменю
function showLayer(layerID)
Делаем слой с подменю видимым:if (layer = document.all[layerID]) layer.style.visibility = 'visible'
11. Функция убирающая подменю
function hideLayer(layerID)
Делаем слой с подменю невидимым:if (layer = document.all[layerID] && (overChildMenu != layerID)) document.all[layerID].style.visibility = 'hidden'
12. Функция обрабатывающая нажатие на основное меню
function clickMenu(x)
Идём по ссылке из меню:openHref(menu[x][0][1])
13. Функция обрабатывающая нажатие на подменю
function clickChildMenu(x,y)
Идём по ссылке из подменю:openHref(menu[x][y][1])
14. Функция перехода по ссылке
function openHref(s)
Если вместо ссылки JavaScript код выполняем его:if (s.indexOf('javascript:') == 0) eval(s);Или переходим по ссылке:
else if (s != '') window.location.href = s;TXT-файл с кодом