Как при нажатии на кнопку открыть и закрыть меню

При нажатии на кнопку - появляется меню, при последующем нажатии - закрывается. Для этой задачи будет использовать jQuery.
Демонстрация

Создадим структуру кнопки, по нажатию на которую будет открываться меню и само меню, которое изначально будет скрыто.

<nav class="wrap-myMenu">
  <button class="main-myButton">☰</button>
  <ul class="content">
    <li><a href="#link97">Главная</a></li>
    <li><a href="#link98">Обо мне</a></li>
    <li><a href="#link99">Портфолио</a></li>
  </ul>
</nav>

Стили по ситуации. Единственное что нужно, это скрыть меню .content.

.content {
  display: none;
}

А уже в JavaScript сделаем чтобы при нажатии на кнопку меню открывалось / закрывалось.

$(function() {
  $('.main-myButton').click(function() {
    $('.content').slideToggle();
  });
});

Должен быть подключен обязательно jQuery.

Демонстрация

Затемнение заднего фона при открытом меню

При открытии меню будем затемнять задний фон, а при закрытии возвращать в первоначальное положение.

Изменим JavaScript код. При клике на кнопку будем добавлять класс overlay для body.

$(function() {
    $('.main-myButton').click(function() {
        $('.content').slideToggle();
        $('body').toggleClass('overlay');
    });
});

Добавим стилей для затемнения.

body.overlay::before {
    content: '';
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    position: absolute;
    z-index: -1;
}

Возможно придётся немного поигратсья с z-index.

Демонстрация

Закрытие меню при клике вне его

Давайте, рассмотрим ситуацию когда необходимо закрывать меню при клике вне его (за пределами меню).

jQuery(($) => {

    // menu

    const menu = $('.content');
    const menuBtn = $('.main-myButton');

    $(document).mouseup(function (e) {
        console.log(e.target)
        if (e.target.className === 'main-myButton') {
            menuBtn.addClass('is-active');
            menu.stop().slideDown();
        } else if (e.target.className === 'main-myButton is-active') {
            menuBtn.removeClass('is-active');
            menu.stop().slideUp();
        } else if ((menu.has(e.target).length === 0) && (menuBtn.has(e.target).length === 0)) {
            // if ($(window).width() < 768) {

                menuBtn.removeClass('is-active');
                menu.stop().slideUp();
            // }

        }
    });

});

Мы написали три условия:

  1. если меню закрыто - открыть его и добавить класс кнопке is-active;
  2. если меню открыто - закрыть его и удалить класс с кнопки is-active;
  3. если клик вне меню и кнопки открытия/закрытия меню - закрыть меню и удалить класс is-active.

Таким образом, мы можем закрывать меню при клике на кнопку и при клике вне области меню.

Демонстрация
Админ admin
» »