Пишем меню на Java Script

Каждый изучающий JS программист должен сделать три вещи: дебажить код алертами, написать выпадающее меню и сделать слайдер. Сегодня мы будет работать с меню.

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

Создадим структуру меню в HTML коде. Пусть все меню будет представлено блоком с id=«nav» . Внутри блока содержаться блоки отвечающие за пунты меню, им присвоен class=«menu-item». Сам пункт меню не выделен тегами, но при необходимости вы имеете возможность его обернуть и оформить по его вкусу. Выпадающие меню, которые закреплены за каждым пунктом, находятся в блоках class=«submenu». Весь код представим следующим образом:

   <div id="nav">
        <div class="menu-item">
            Меню 1
            <div class="submenu">
                Подменю
            </div>
        </div>
        <div class="menu-item">
            Меню 2
            <div class="submenu">
                Подменю
            </div>
        </div>
        <div class="menu-item">
            Меню 3
            <div class="submenu">
                Подменю
            </div>
        </div>
    </div>

Меню 1

Подменю

</div>

Меню 2

Подменю

</div>

Меню 3

Подменю

</div>

Задаем оформление меню

Для меню зададим следующее оформление. Напомню, что моя задача — продемонстрировать процесс создания меню, а красивые темы и оболочки — будут чуть позже. В файле style.css укажем следующие стили:

/*Для пунктов меню*/
.menu-item {
    border: 2px solid red; /*Красная граница пунктов*/
    display: inline-block; /*Выстраиваем пункты в линию*/
    position: relative;
    cursor: pointer; /*Указатель курсора мыши*/
}

/*Для пунктов меню*/

.menu-item {

border: 2px solid red; /*Красная граница пунктов*/

display: inline-block; /*Выстраиваем пункты в линию*/

position: relative;

cursor: pointer; /*Указатель курсора мыши*/

}

Для раскрывающихся меню зададим следующие стили:

.menu-item .submenu {
    height: 50px; /*высота открывающегося блока - не обязательный пункт*/
    width: 150px;/*ширина блока*/
    background: greenyellow; /*фон*/
    display: none; /*скрываем все пункты меню*/
    position: absolute;
    cursor: pointer;
}

.menu-item .submenu {

height: 50px; /*высота открывающегося блока - не обязательный пункт*/

width: 150px;/*ширина блока*/

background: greenyellow; /*фон*/

display: none; /*скрываем все пункты меню*/

position: absolute;

cursor: pointer;

}

После написания данных стилей блоки с вложенными меню пропадут!

Программируем меню на JS

Итак, начинаем самое интересное. Все раскрывающиеся меню скрыты с помощью CSS. Необходимо их отображать с помощью JS.

Отображать меню нужно при наведении на пункт меню курсора мыши (событие onmouseover). Данное событие мы будем отслеживать только внутри блока с id=«nav»

document.getElementById('nav').onmouseover= function(event) {
}

1 2	document.getElementById('nav').onmouseover= function(event) { }

Даная запись отслеживает нахождение мыши внутри блока навигации. Затем, необходимо выяснить где был произведен клик мышью. Для этого мы заведем переменную target куда занесем event.target — текущий элемент на котором произошло событие.

document.getElementById('nav').onmouseover= function(event) {
   var target = event.target; // где был клик?
}

document.getElementById('nav').onmouseover= function(event) {

var target = event.target; // где был клик?

}

Теперь, нужно проверить, чтобы тот блок, на котором сейчас находится мышь, имел класс menu-item. Если это так, то необходимо получить блок с class=«submenu» внутри него. Сделать это можно с помощью команды var s=target.getElementsByClassName(«submenu»). В результате работы команды в переменной s будет находиться массив из одного элемента, который содержит вложенное меню. Обращаться к нему можно с помощью идентификатора s[0].

После того, как мы выяснили, где находится мышь и какой блок подменю нужно отобразить выполним действия: скроем все открытые меню и отобразим текущее подменю:

document.getElementById('nav').onmouseover= function(event) {
    var target = event.target; // где был клик?
    if (target.className == 'menu-item') {
        var s=target.getElementsByClassName('submenu');
        closeMenu();
        s[0].style.display='block';
    }
}

document.getElementById('nav').onmouseover= function(event) {

var target = event.target; // где был клик?

if (target.className == 'menu-item') {

var s=target.getElementsByClassName('submenu');

closeMenu();

s[0].style.display='block';

}

Скрывать все открытые меню мы будем с помощью функции closeMenu(). Данная функция получит все элементы submenu в блоке nav и с помощью цикла всем присваивает стили style.display=«none» . Полный код функции:

function closeMenu(){
    var menu=document.getElementById('nav');
    var subm=document.getElementsByClassName('submenu');
    for (var i=0; i<subm.length; i++) {
        subm[i].style.display="none";
    }
}

function closeMenu(){

var menu=document.getElementById('nav');

var subm=document.getElementsByClassName('submenu');

for (var i=0; i<subm.length; i++) {

subm[i].style.display="none";

}

Осталась очень важная вещь: меню нужно скрывать если мышь ушла за пределы блока nav. Однако, пока мышь находится на подменю — его нужно отображать. Запишем функцию, которая будет отслеживать положение мыши и проверять элементы под курсором. Если эти элементы не являются menu-item или submenu — то будет закрывать все раскрытые меню.

document.onmousemove=function(event) {
    var target = event.target; // где был клик?
    console.log(event.target);
    if (target.className!='menu-item' && target.className!='submenu') {
        closeMenu();
    }
}

document.onmousemove=function(event) {

var target = event.target; // где был клик?

console.log(event.target);

if (target.className!='menu-item' && target.className!='submenu') {

closeMenu();

}

Таким образом, мы получили рабочее выпадающее меню на javascript, которое вы имеете возможность использовать на своих сайтах. Просмотреть демонстрацию меню можно прямо здесь:

See the Pen Menu on JS by Alex (@Asmodey) on CodePen.

Обратите внимание, браузер firefox работает с event другим способом, поэтому данный код необходимо дополнить до кроссбраузерного! Данное действие мы будем выполнять чуть позже.

Также можно реализовать меню с помощью ООП методов.