Slide left menu

Change class name on click in jQuery

by Ganta

HTML

<button class="js-hamburger">гамбургер</button>

<div class="menu">меню</div>

CSS

body {
  margin: 40px;
}

.menu {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100vh;
  background: #eee;
  transition: left 0.35s ease;
}

body.menu-opened .menu {
  left: 0;
}

button {
  position: relative;
  z-index: 1;
}

body.menu-opened button {
  border: 2px solid red;
}

.menu {
  padding: 70px 40px;
}

JavaScript

$('.js-hamburger').click(function() {
  $("body").toggleClass('menu-opened');
});