Логин:   Пароль:






Новости
Рассылки
Форум
Поиск


Java
- Апплеты
- Вопрос-ответ
- Классы
- Примеры
- Руководства
- Статьи
- IDE
- Словарь терминов
- Скачать

Мобильная Java
- Игры
- Примеры
- Статьи
- WAP, WML и пр.

JavaScript
- Вопрос-ответ
- Примеры
- Статьи

Веб-мастеринг
- HTML
- CSS
- SSI

Разминка для ума
Проекты
Книги
Ссылки
Программы
Юмор :)




Rambler's Top100
Rambler's Top100

JavaScript: ПримерыТекстовое двухуровневое выпадающее меню как в Windows меню "Пуск"

Текстовое двухуровневое выпадающее меню как в 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 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-файл с кодом

Warning: mysql_connect() [function.mysql-connect]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/books/show2b.php on line 11

Warning: mysql_db_query() [function.mysql-db-query]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/books/show2b.php on line 19

Warning: mysql_db_query() [function.mysql-db-query]: A link to the server could not be established in /pub/home/javaport/javaportal/books/show2b.php on line 19

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /pub/home/javaport/javaportal/books/show2b.php on line 30
Узнай о чем ты на самом деле сейчас думаешь тут.


[an error occurred while processing this directive]



Warning: mysql_connect() [function.mysql-connect]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/news/worldnews.php on line 91

Warning: mysql_db_query() [function.mysql-db-query]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/news/worldnews.php on line 93

Warning: mysql_db_query() [function.mysql-db-query]: A link to the server could not be established in /pub/home/javaport/javaportal/news/worldnews.php on line 93

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /pub/home/javaport/javaportal/news/worldnews.php on line 95