БЛОГ НА HUSL


Выпадающее меню по клику на ванильном JS

Автор вопроса: Black Fire

Нужно чтобы по клику на кнопку-бургер тоглилось появление меню. Как реализовать на чистом JS?

.header {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  display: block;
}

.container {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}

.header-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 60px;
    background: #fff;
    line-height: 26px;
    width: 200px;
}

.header-menu__list {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

.header-menu__list-item {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-bottom: 2px solid #f5f5f5;
}

.header-menu__link {
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-transform: uppercase;
font-family: Roboto,sans-serif;
color: #7c7c7c;
text-decoration: none;
margin: 0 15px;
}

.header-menu__hamburger {
margin: 23px 0;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
float: right;
width: 44px;
height: 37px;
background: #000;
border: #000;
outline: 0;
}

.header-menu__line {
-webkit-box-direction: normal;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
width: 17px;
height: 2px;
background: #fff;
margin: 2px 0;
}

.header__image {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
max-width: 100%;
}
<header class="header">
        <div class="container">
            <nav class="header-menu">
                <ul class="header-menu__list">
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Home</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">About us</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Our journal</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Projects</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">News</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Features</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Contact</a>
                    </li>
                </ul>
            </nav>
            <button class="header-menu__hamburger" id="menuToggle" data-target="#hamburgerToggle">
                <div class="header-menu__line"></div>
                <div class="header-menu__line"></div>
                <div class="header-menu__line"></div>
            </button>
            <img src="https://avatars.mds.yandex.net/get-pdb/163339/4f27a481-cab6-4d41-8b65-d68eadcf9bb8/s1200" class="header__image" alt="Header Image">
        </div>
    </header>


Источник

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

Автор решения: ALexander

Самый простой добавить/убрать у элементов классы:

Методы classList:

elem.classList.add/remove("class") – добавить/удалить класс. elem.classList.toggle("class") – добавить класс, если его нет, иначе удалить. elem.classList.contains("class") – проверка наличия класса, возвращает true/false.

т.е. всё необходимое описываешь в css (делаешь невидимым меню и т.п. параллельно пишешь класс с видимым меню), далее всё при клике на бургер меню добавляешь класс списку и класс бургеру. При повторном клике класс убираешь.

Другой вариант редактировать css напрямую:

elem.style.display = "none"; // скрыть

→ Ссылка
Автор решения: Leks 

document.querySelector('.header-menu__hamburger').addEventListener('click', e =>{
  document.querySelector('.header__image').classList.toggle('block');
})
  .header {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    display: block;
  }

  .container {
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
  }

  .header-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 60px;
      background: #fff;
      line-height: 26px;
      width: 200px;
  }

  .header-menu__list {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    list-style: none;
  }

  .header-menu__list-item {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  border-bottom: 2px solid #f5f5f5;
  }

  .header-menu__link {
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-transform: uppercase;
  font-family: Roboto,sans-serif;
  color: #7c7c7c;
  text-decoration: none;
  margin: 0 15px;
  }

  .header-menu__hamburger {
  margin: 23px 0;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  float: right;
  width: 44px;
  height: 37px;
  background: #000;
  border: #000;
  outline: 0;
  }

  .header-menu__line {
  -webkit-box-direction: normal;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  width: 17px;
  height: 2px;
  background: #fff;
  margin: 2px 0;
  }

  .header__image {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 100%;
  }

.block{
  display: none;
}
<header class="header">
        <div class="container">
            <nav class="header-menu">
                <ul class="header-menu__list">
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Home</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">About us</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Our journal</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Projects</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">News</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Features</a>
                    </li>
                    <li class="header-menu__list-item">
                        <a href="#" class="header-menu__link">Contact</a>
                    </li>
                </ul>
            </nav>
            <button class="header-menu__hamburger" id="menuToggle" data-target="#hamburgerToggle">
                <div class="header-menu__line"></div>
                <div class="header-menu__line"></div>
                <div class="header-menu__line"></div>
            </button>
            <img src="https://avatars.mds.yandex.net/get-pdb/163339/4f27a481-cab6-4d41-8b65-d68eadcf9bb8/s1200" class="header__image" alt="Header Image">
        </div>
</header>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.