CSS → Простое slide-меню

Создание простого slide-меню как в мобильных приложениях:

HTML:

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

.menu-content {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  overflow-y: auto;
  transition: 0.2s;

  /* Скрываем меню */
  transform: translateX(-100%);
  visibility: hidden;
}
.menu-opened .menu-content {
  /* Показываем меню */
  transform: none;
  visibility: visible;
}

Javascript:

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

Демо