Выпадающее меню на JavaScript

Как создать выпадающее меню при наведении курсора мышки на пункт меню с использованием JavaScript.

Выполним горизонтальное меню без применения таблиц, для этого будем использовать блоки div и свойство CSS - float (обтекание). Тогда пункты меню достаточно будет записать подряд в блоках div, с классом punkt. Также заключим все меню в блок с классом menu, и еще для наглядности все пункты меню поместим в блок с идентификатором block_menu. То есть на данном этапе получим следующий HTML-код:

1. <style>
2. .punkt{float:left}
3. .footer_menu{clear:both}
4. </style>
5. <div class=menu>
6. <div id=block_menu>
7. <div class=punkt>О проекте</div>
8. <div class=punkt>Веб-дизайн</div>
9. </div>
10. <div class=footer_menu></div>
11. </div>

В итоге получается строчка из пунктов меню. Также добавлен блок footer_menu со свойством clear:both, с помощью которого уберается действие свойства float пунктов меню на последующее содержимое странички.

Пункты выпадающего меню - это подпункты.

Далее делаем выпадающее меню блоком div с абсолютным позиционированием. Тогда нужно обозначить блок div с классом punkt как относительно позиционируемый, и в нем прописать блок div со списком подпунктов, как абсолютно позиционируемый. Для блока div со списком подпунктов определим класс list_punkts. Этот блок нужно будет сделать невидимым, и лишь при наведении на пункт делать его видимым. Сделать первоначально его невидимым нам поможет свойство display:none. В дальнейшем показывать и убирать его будем при помощи JavaScript, управляя все тем же свойством display. Отображаться же будет блок со списком подпунктов ниже пункта меню и выравниваться по левому краю. На данном этапе получим следующий код:

1. <style>
2. .punkt{float:left;position:relative}
3. div.list_punkts{position:absolute;top:26px;left:0;display:none}
4. </style>
5. <div class=menu>
6. <div id=block_menu>
7. <div class=punkt>
8. <div>О проекте</div>
9. <div class=list_punkts>
10. <a href=#><div class=podpunkt>Главная</div></a>
11. <a href=#><div class=podpunkt>О нас</div></a>
12. </div>
13. </div>
14. </div>
15. <div class=footer_menu></div>
16. </div>

Для отображения выпадающего меню при наведении курсора мышки на пункт меню будем использовать обработчик событий onMouseOver, которому укажем функцию, делающую наш блок видимым. Для скрытия выпадающего меню при уводе указателя мыши с пункта меню будем использовать обработчик событий onMouseOut, которому укажем функцию, делающую наш блок невидимым. Теперь осталось решить, как получить доступ к пункту меню и блоку со списком подпунктов. Решим эту задачу с помощью DOM. Для этого в обработчике событий передадим исполняющей функции объект пункта меню, у нас это div с классом punkt. Реализуем это с помощью ключевого слова this, которое означает текущий объект, например, если мы напишем

1. <div class=punkt onMouseOver=overPunkt(this)>
2. …
3. </div></div>

то при вызове функции overPunkt(obj_block){…} переменная obj_block будет содержать объект блока div приведенного в примере.

Однако использование DOM потребует заключить текст пункта меню в блок div и повышенного внимания при наборе HTML-кода. Давайте рассмотрим уже готовый к употреблению код:

1. <style>
2. body{font-family:ubuntu,arial;font-size:13px;margin:0;padding:0;background:#ade}
3. .menu{background:#c4c;width:100%}
4. #block_menu{margin-left:5px}
5. .punkt{float:left;padding:1px 1px 0;background:transparent;position:relative;cursor:pointer}
6. .punkt div{padding:2px 7px}
7. div.list_punkts{background:#c6e;position:absolute;top:26px;left:0;display:none;padding:0;width:180;border:solid 1px #000}
8. div.list_punkts div.kont{padding:0;margin:3px}
9. div.list_punkts a{text-decoration:none;padding:0;cursor:pointer;color:#000}
10. div.list_punkts div a div.podpunkt{width:100%;padding:0;margin-top:2px}
11. div.list_punkts div a div.podpunkt div{width:100%;padding:0 0 0 2px;white-space:pre}
12. div.list_punkts div a:hover{background:#7c5}
13. div.list_punkts div a:hover div.podpunkt{background:#7c5;color:#fff}
14. .footer_menu{clear:both}
15. </style>
16. <script>
17. function overPunkt(obj_listPunkt)
18. {/*делаем выпадающее меню видимым*/
19. obj_listPunkt.childNodes[1].style.display='block';
20. /*ставим выпадающее меню ниже пункта меню*/
21. obj_listPunkt.childNodes[1].style.top=obj_listPunkt.offsetHeight;
22. /*дальше идет оформление пункта меню*/
23. obj_listPunkt.style.background='#808';
24. obj_listPunkt.style.padding=0;
25. obj_listPunkt.childNodes[0].style.border='solid 1px #000';
26. obj_listPunkt.childNodes[0].style.borderBottom='none';
27. /*запоминаем цвет текста пункта меню, чтоб потом его можно было восстановить*/
28. color_text=obj_listPunkt.style.color;
29. obj_listPunkt.style.color='#dfd'}
30. function outPunkt(obj_listPunkt)
31. {/*делаем выпадающее меню невидимым*/
32. obj_listPunkt.childNodes[1].style.display='none';
33. /*дальше восстанавливаем первоначальный внешний вид пункта меню*/
34. obj_listPunkt.style.background='transparent';
35. obj_listPunkt.style.padding=1;
36. obj_listPunkt.style.paddingBottom=0;
37. obj_listPunkt.childNodes[0].style.border='none';
38. obj_listPunkt.style.color=color_text}
39. </script>
40. <div class=menu>
41. <div id=block_menu>
42. <div class=punkt onMouseOver=overPunkt(this)onMouseOut=outPunkt(this)><div>О проекте</div>
43. <div class=list_punkts><div class=kont>
44. <a href=#><div class=podpunkt><div>Главная</div></div></a>
45. <a href=#><div class=podpunkt><div>О нас</div></div></a>
46. </div></div></div>
47. <div class=punkt onMouseOver=overPunkt(this)onMouseOut=outPunkt(this)><div>Веб-дизайн</div>
48. <div class=list_punkts><div class=kont>
49. <a href=#><div class=podpunkt><div>Основы</div></div></a>
50. <a href=#><div class=podpunkt><div>Статьи</div></div></a>
51. </div></div></div>
52. </div>
53. <div class=footer_menu></div>
54. </div>

Для того, чтобы правильно работали функции обработки пункта меню и списка подпунктов, нужно блок пункта меню, блок с названием и блок со списком подпунктов писать без пробелов, при необходимости переносить текст на новую строку можно в теге, следующим образом:

<div class=punkt onMouseOver=overPunkt(this) onMouseOut=outPunkt(this)><div>PHP</div><div class=list_punkts></div></div>

Этот способ облегчает написание как самих функций, так и исключает некоторые действия другого рода.

При наведении курсора на пункт меню, обработчик событий onMouseOver вызовет функцию overPunkt() и переменной obj_listPunkt будет передан объект div с классом punkt. Согласно записанному HTML-коду 1-м дочерним объектом будет блок div с названием пункта. К нему доступ можно получить, записав следующее:

obj_listPunkt.childNodes[0]

Доступ к блоку div с классом list_punkts, содержащий список подпунктов (выпадающее меню) можно получить следующим образом:

obj_listPunkt.childNodes[1]

Так как свойство childNodes содержит список потомков узла и для доступа к какому-нибудь потомку нужно указать номер потомка (отсчет начинается с нуля), что мы и применили.

Кроме управления видимостью выпадающего меню в функциях overPunkt() и outPunkt() также меняется и внешний вид пункта меню, т.к. в HTML-коде добавлены еще элементы оформления внешнего вида меню.