Выезжающее мобильное меню Jquery+HTML+CSS

В этой статье разберем процесс создания мобильного меню с плавным выездом слева из-за границы окна на Jquery, JS, CSS и HTML. Меню будет адаптивно, то есть будет возможность применить его и в версии для ПК и планшетов. Ширину для ПК установим примерно в 30% от ширины экрана.

Как создать кнопку "hamburder" на чистом CSS и варианты ее кастомизации можно посмотреть в отдельной статье. Готовая кнопка "гамбургер" для бокового меню на CSS и SCSS.

Мы же перейдем сразу к созданию мобильного бокового меню. Сначала опишем структуру блока на HTML.

<div class="mobile-menu" id="mobile-menu">
    <div class="mm__bg mm__close"></div>
    <div class="mm__wrapper" id="mm__wrapper">
        <div class="mm__header">
            <span class="close-btn close-btn--red mm__close"></span>
            <a href="/" class="h__logo"></a>
        </div>
    </div>
</div>

В контейнере mobile-menu размещаем фон затемнения экрана и основной контейнер меню. В контейнере меню сделаем шапку, в которую, например, можно поместить логотип компании и крестик для закрытия окна. Получается окно будет закрывать и нажатие на крестик и нажатие на фон.

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100; }
  @media (min-width: 768px) {
    .mobile-menu {
      padding-top: 0; } }
  .mobile-menu .mm__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.8);
    z-index: 100; }
  .mobile-menu .mm__wrapper {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: all .4s ease-in-out;
    overflow-y: auto;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 200;
    touch-action: auto;
    -ms-touch-action: auto;
    background: #fff; }
    @media (min-width: 768px) {
      .mobile-menu .mm__wrapper {
        width: 35%; } }
    @media (min-width: 1200px) {
      .mobile-menu .mm__wrapper {
        width: 25%; } }
  .mobile-menu .h__logo {
    padding-left: 40px;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.25;
    margin-left: 20px;
    margin-top: 15px; }

.mm__header .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 15px;
  margin-top: 15px; }

Кстати говоря, крестик закрытия окна сделаем тоже на чистом CSS. Для этого нам надо нарисовать из двух блоков + и повернуть его на 45 градусов.

.close-btn {
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer; }
  .close-btn:before {
    width: 2px;
    height: 18px;
    left: 8px;
    top: 0; }
  .close-btn:after {
    height: 2px;
    width: 18px;
    top: 8px;
    left: 0; }
  .close-btn:before, .close-btn:after {
    content: "";
    background: #000;
    position: absolute; }
.close-btn--red:before, .close-btn--red:after {
  background: #7A0D10; }

Теперь собственно скрипт открытия на jquery.

$(document).ready(function () {
    //мобильное меню
    $('#mobile-menu-btn').click( function(event){
        event.preventDefault();
        $('#mobile-menu').fadeIn();
        $('#mm__wrapper')
            .css('visibility', 'visible')
            .css('transform', 'translateX(0)');
        $("body").css("overflow","hidden");
    });
    //закрытие мобильного меню
    $('.mm__close').click( function(){
        $('#mobile-menu').fadeOut();
        $('#mm__wrapper')
            .css('visibility', 'hidden')
            .css('transform', 'translateX(-100%)');
        $("body").css("overflow","auto");
    });
});