Текстовое двухуровневое выпадающее меню как в Windows меню «Пуск» Javascript

Текстовое двухуровневое выпадающее меню как в 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 yuraladik@javaportal.ru
//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("Новости","http://www.javaportal.ru/news/news.html","Новости проекта")

menu[1]  = new Array()
menu[1][0] = new Array("О проекте","http://www.javaportal.ru/project.html","О проекте")

menu[2]  = new Array()
menu[2][0] = new Array("Рассылки","http://www.javaportal.ru/subs/subs.html","Рассылки")

menu[3]  = new Array()
menu[3][0] = new Array("Связь с нами","http://www.javaportal.ru/link.html","Связь с нами")

menu[4]  = new Array()
menu[4][0] = new Array("Java","","Всё о Java")//Название, URL, описание
menu[4][1] = new Array("Апплеты","http://www.javaportal.ru/java/applets/applets.html","Коллекция Java апплетов")
menu[4][2] = new Array("Вопрос-ответ","http://www.javaportal.ru/java/faq/faq.html","FAQ по Java")
menu[4][3] = new Array("Классы","http://www.javaportal.ru/java/class/class.html","Описание Java классов")
menu[4][4] = new Array("Конференция","http://www.javaportal.ru/conference/conference.html","Конференция по Java")
menu[4][5] = new Array("Примеры","http://www.javaportal.ru/java/examples/examples.html","Примеры Java")
menu[4][6] = new Array("Статьи","http://www.javaportal.ru/java/articles/articles.html","Статьи по Java")

menu[5]  = new Array()
menu[5][0] = new Array("JavaScript","","Всё о JavaScript")//Название, URL, описание
menu[5][1] = new Array("Вопрос-ответ","http://www.javaportal.ru/javaScript/faq/faq.html","FAQ по JavaScript")
menu[5][2] = new Array("Конференция","http://www.javaportal.ru/conference/conference.html","Конференция по JavaScript")
menu[5][3] = new Array("Примеры","http://www.javaportal.ru/javaScript/examples/examples.html","Примеры JavaScript")
menu[5][4] = new Array("Статьи","http://www.javaportal.ru/javaScript/articles/articles.html","Статьи по JavaScript")

menu[6]  = new Array()
menu[6][0] = new Array("Разное ","","Всего помаленьку")
menu[6][1] = new Array("Словарь терминов","http://www.javaportal.ru/dictionary/dictionary.html","Словарь терминов")
menu[6][2] = new Array("Статьи","http://www.javaportal.ru/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 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 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 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;

Javascript