Выпадающее меню при наведении на чистом javascript

Выпадающее меню при наведении на чистом javascript

Стенограмма видео (встречаются расхождения*):

В этом видео я покажу как можно сделать выпадающее меню при наведении с помощью чистого javascript. Для начала нужно сверстать наше будущее меню.

<ul class="menu">
   <li class="menu-item">
      <a href="#">Пункт меню 1</a>
      <ul class="sub-menu">
         <li>
            <a href="#">Подпункт меню 1</a>
         </li>
         <li>
            <a href="#">Подпункт меню 2</a>
         </li>
         <li>
            <a href="#">Подпункт меню 3</a>
         </li>>
      </ul>
   </li>

   <li class="menu-item">
      <a  href="#">Пункт меню 2</a>
      <ul class="sub-menu">
         <li>
            <a href="#">Подпункт меню 1</a>
         </li>
         <li>
            <a href="#">Подпункт меню 2</a>
         </li>
      </ul>
   </li>
</ul>

Теперь скроем дочерние списки sub-menu, добавив им следующие стили:

.sub-menu {height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease-in;}

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

Начнем с того, что соберем коллекцию из элементов с классом menu-item:

var el = document.getElementsByClassName('menu-item');

Затем посредством цикла for я обойду все элементы коллекции и для каждого из них установлю слушателей события

for(var i=0; i<el.length; i++) {
   el[i].addEventListener("mouseenter", showSub, false);
   el[i].addEventListener("mouseleave", hideSub, false);
}

Первый слушатель предназначен для события mouseenter, то есть при наведении мыши будет выполняться функция showSub, а когда убираем мышь с элемента, то срабатывает функция hideSub. Осталось лишь написать эти 2 функции:

function showSub(e) {
   if(this.children.length>1) {
      this.children[1].style.height = "auto";
      this.children[1].style.overflow = "visible";
      this.children[1].style.opacity = "1";
   } else {
      return false;
   }
}

Эта функция будет открывать sub-menu при наведении на текущий элемент с классом menu-item, для которого как раз-таки sub-menu будет являться вторым потомком - это тег ul, т.е. иметь индекс 1, ну соответственно первый потомок имеет индекс ноль и в данном случае эта тег a. И если таких потомков более одного, то есть помимо ссылки есть еще и подменю, то список ul будет приобретать автоматическую высоту, видимость и отсутствие прозрачности, то есть будет раскрываться, если же потомков менее либо равно 1, то происходить ничего не должно - return false.

Теперь функция для обратного действия:

function hideSub(e) {
    if(this.children.length>1) {
      this.children[1].style.height = "0px";
              this.children[1].style.overflow = "hidden";
              this.children[1].style.opacity = "0";
       } else {
              return false;
       }
}

То есть здесь точно такая система, но направленная на изменение стилей для скрытия подменю.

Теперь давайте проверим как это работает. Обновляю - навожу мышь - меню открывается, убираю мышь - оно сворачивается.

Таким образом можно сделать открывающееся подменю при наведении мыши на чистом js.