Add Class

JavaScript – додати клас до елемента по id

by Андрій Іванюра

HTML

<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>

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

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);