Як із допомогою JavaScript змінити клас елемента

Як дуже просто із допомогою JavaScript змінити клас елемента? Клік по одному елементі змінює інший на льоту. Дивіться на реальному прикладі.

Як дуже просто із допомогою JavaScript змінити клас елемента? Клік по одному елементі змінює інший на льоту. Дивіться на реальному прикладі.

В даний момент я працюю над цікавою реалізацією випливаючого меню для сайту. Раніше мені вистачало можливостей CSS3, та виникла проблема, якої я не зміг вирішити без JavaScript, тому дивимось, що в мене вийшло.

Отже, приклад буду показувати на основі випадаючого меню.

Маємо певне посилання із дуже оригінальною назвою «Меню», по кліку на якому повинні з’явитися всі пункти меню, які до цього часу були сховані.

Створюємо простенький код меню:

<a href="#" id="toogle">Menu</a>
<ul id="top-menu">
  <li class="link">
    <a href="#">Link 1</a>
  </li>
  <li class="link">
    <a href="#">Link 2</a>
  </li>
  <li class="link">
    <a href="#">Link 3</a>
  </li>
</ul>

Посилання із id=”toogle” та підписом «Меню» і буде нашою кнопкою, яка викликатиме пункти меню із нірвани на світ Божий.

Для того, щоб спочатку приховати пункти меню, задаємо списку #top-menu нульову висоту – настільки тонке меню, аж прозоре, важко буде помітити 😉

Тепер наперед уявимо, що при кліку по кнопці «Меню», до #top-menu додається клас .menu-opened. Цьому класу присвоюємо зміну висоти до 100% (не забудьте вказати значення !important, оскільки ми мусимо дозволити класу переназначити стиль ідентифікатора, а це за замовчуванням заборонено.

Решта стилів прописані для кращого візуального сприйняття, у Вас все може бути по-іншому. Ось код CSS:

#top-menu {
  position: fixed;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 0;
  transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
}

.menu-opened {
  height: 100% !important;
}

.link {
  width: 38.2vw;
  max-width: 440px;
  height: 20vw;
  max-height: 231px;
  margin: 0.5vw;
  text-align: center;
  display: table;
}

.link a {
  color: #fff;
  background: #333;
  display: block;
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

І все-таки: як із допомогою JavaScript змінити клас елемента?

А тепер спробуємо, власне, із допомогою JavaScript змінити клас елемента, а вірніше додати його до списку #top-menu:

function menuOpen() {
  if (document.getElementById("top-menu").classList.contains('menu-opened')) {
    document.getElementById("top-menu").classList.remove('menu-opened');
  } else {
    document.getElementById("top-menu").classList.add('menu-opened');
  }
}

function siteLoaded() {
  document.getElementById("toogle").addEventListener('click', menuOpen);
}
document.addEventListener("DOMContentLoaded", siteLoaded);

Даний скрипт перевірятиме, чи немає часом в елемента з id=”top-menu” класу під іменем “menu-opened”. Якщо немає – автоматично додаватиме, якщо є – видалятиме. Ну просто Робін Гуд, чи не так? 😉

Результатом таких чарів буде поява-зникання пунктів меню при кожному кліку на посиланні «Меню». Переконайтеся самі:

Код ДУЖЕ недосконалий, потребує багато виправлень, але за основу його взяти можна. В наступній статті я торкнуся оформлення кнопки меню у вигляді знаменитого «бургера». Не забувайте поширювати мої статті та підписуватися на оновлення блогу 😉

Якщо ви виявили орфографічну помилку, будь ласка, повідомте мені. Виділіть текст із помилкою та натисніть Ctrl+Enter.

08.04.2017 PHP, HTML, CSS

Прокоментувати