Как сделать открытие меню по клику?

Question

Есть меню и кнопка, у кнопки задана картинка в сss, картинка "бургер-меню". Как сделать чтобы при нажатии на кнопку открывалось меню и картинка менялась на крестик? На чистом js, а то везде примеры на jQuery.

<aside class="contener__aside">
        <nav class="aside__nav">
            <ul class="nav__menu-aside">
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside nav__menu__link-active">Ремонт техники</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Услуги и сервисы</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Корпоративным клиентам</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Продавцам техники</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Партнерам</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Производителям</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Наши сервисные центры</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Контакты</a></li>
            </ul>
        </nav>
    </aside>

<button class="header__button">
                </button>

При ширине 1120px меню открыто полностью, но при ширине 768px и меньше оно скрыто display:none и должно открываться при нажатии на кнопку.

Answer 1

Код взят отсюда

const sandwichmenu = document.querySelector('#sandwichmenu');
const js_menu = document.querySelector('.js_menu');

sandwichmenu.addEventListener('click', function(e) {
  e.preventDefault();
  sandwichmenu.classList.toggle('active');
  js_menu.classList.toggle('active');
});

#sandwichmenu {
  margin: 5px 0 0 0;
  text-align: center;
}

.tpl_hamburger svg {
  height: 40px;
  width: 60px;
}

.tpl_hamburger svg {
  cursor: pointer;
  height: 50px;
  transform: translate3d(0px, 0px, 0px);
  width: 80px;
}

svg:not(:root) {
  overflow: hidden;
}

.tpl_hamburger path.top,
.tpl_hamburger path.bottom {
  stroke-dasharray: 240px, 950px;
}

.tpl_hamburger path {
  fill: none;
  stroke: #000;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 40px;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s, stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s;
}

.tpl_hamburger path.middle {
  stroke-dasharray: 240px, 240px;
}

.tpl_hamburger path {
  fill: none;
  stroke: #000;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 40px;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s, stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s;
}

.tpl_hamburger.active path.top,
.tpl_hamburger.active path.bottom {
  stroke-dashoffset: -650px;
}

.tpl_hamburger path.top,
.tpl_hamburger path.bottom {
  stroke-dasharray: 240px, 950px;
}

.tpl_hamburger.active path.middle {
  stroke-dasharray: 1px, 220px;
  stroke-dashoffset: -115px;
}

.js_menu {
  display: none;
}

.js_menu.active {
  display: block;
}

<div class="tpl_hamburger" id="sandwichmenu">
  <svg viewBox="0 0 800 600">
    <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" class="top"></path>
    <path d="M300,320 L540,320" class="middle"></path>
    <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" class="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
  </svg>
</div>
<div class="js_menu">
  menu there
</div>

БЛОГ НА HUSL

Как сделать открытие меню по клику?

Ответы (1 шт):