How do I make a pop-up horizontal menu when clicking on a hamburger on a pure javascripte?

Question

How do I make a pop-up horizontal menu when clicking on a hamburger on a pure javascripte?

How to make a horizontal menu pop-up when clicking on a hamburger on a pure javascripte, when adapting?

Here is the html code:

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

0

English html5 html css css3

Author: aquaprogit, 2018-10-22

Source

1 answers

score 1 · Accepted Answer

JavaScript code for hiding and displaying the menu. To hang animations and other effects, use the Jquery library.

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>