Боковая менюшка

by tpew

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="menu">
  <div class="menu-open">☰</div>
  <div class="menu-content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <div class="menu-close">✕</div>
  </div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.menu-open {
  float: left;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}
.menu-close {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 10px;
  line-height: 1;
}
.menu-content {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  transform: translateX(-100%);
  overflow-y: auto;
  transition: 0.2s;
  background: #00B168;
}
.menu-opened .menu-content {
  transform: none;
}

JavaScript

$(function() {
  $('.menu-open').on('click', function() {
    $('.menu').toggleClass('menu-opened');
  });
  $('.menu-close').on('click', function() {
    $('.menu-open').click();
  });
});