0

Как сделать выезжающее горизонтальное меню при клике на гамбургер на чистом javascripte, при адаптации?

Вот код html:

.gamburger {
    	width: 40px;
    	cursor: pointer;
    	display: none;
    }
    
    .gamburger span {
    	height: 4px;
    	background: #fff;
    	margin-bottom: 5px;
    	display: block;
    }
<nav class="navigation">
    			<div class="container">
    				<ul class="menu">
    					<li class="menu__item"><a href="#" class="menu__link">Home</a></li>
    					<li class="menu__item"><a href="#" class="menu__link">About</a></li>
    					<li class="menu__item"><a href="#" class="menu__link">Team</a></li>
    					<li class="menu__item"><a href="#" class="menu__link">Lessons</a></li>
    					<li class="menu__item"><a href="#" class="menu__link">News</a></li>
    					<li class="menu__item"><a href="#" class="menu__link">Conracts</a></li>
    				</ul>
    				<div class="gamburger">
    					<span></span>
    					<span></span>
    					<span></span>
    				</div>
    			</div>
    		</nav>

    

4
  • 2
    А где код JS? Или вы подразумеваете чтоб всё выполнили за вас? Попробуйте сделать что-то, а потом напишите с вашим кодом и опишите что не получается и что не можете понять. Вам обязательно помогут
    – Nilsan
    22 окт 2018 в 10:13
  • 1
    да и css лучше добавьте, гамбургер же нужно рисовать 22 окт 2018 в 10:16
  • Я просто js пока что не знаю, думал, чтоб кто-нибудь помог написать
    – Артур
    22 окт 2018 в 10:17
  • Если вы не знаете пока js, так сделайте это меню на чистом css.
    – E_K
    22 окт 2018 в 10:47

1 ответ 1

1

JavaScript код скрытия и показа меню. Для навешивания анимации и прочих эффектов используйте библиотеку Jquery.

var burger = document.querySelector('.gamburger');
var menu = document.querySelector('.menu');

burger.addEventListener('click', function () {

  if (menu.classList.contains('menu-closed')) {
    menu.classList.remove('menu-closed');
    menu.classList.add('menu-opened');
  } else {
    menu.classList.add('menu-closed');
    menu.classList.remove('menu-opened');
  }
});
.gamburger {
	cursor: pointer;
}

.menu-opened {
	display: block;
}

.menu-closed {
	display: none;
}
<nav class="navigation">
  <div class="container">

    <ul class="menu menu-closed">
      <li class="menu__item">
        <a href="#" class="menu__link">Home</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">About</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Team</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Lessons</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">News</a>
       </li>
      <li class="menu__item">
        <a href="#" class="menu__link">Conracts</a>
      </li>
    </ul>

		<button class="gamburger">иконка гамбургер</button>
  </div>
</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.