Два бургер меню, открыто первом меню, при нажатии на второе, первое автоматически закрывается и наоброт

Question

Два бургер меню, открыто первом меню, при нажатии на второе, первое автоматически закрывается и наоброт

Рейтинг: 0Ответов: 1Опубликовано: 29.03.2023

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

$(document).ready(function() {
  $(".menu-burger__header").click(function() {
    $(".menu-burger__header").toggleClass("open-menu");
    $(".header__nav").toggleClass("open-menu");
    $("body").toggleClass("fixed-page");
  });
});

$(document).ready(function() {
  $(".menu-burger_img").click(function() {
    $(".menu-burger_img").toggleClass("open-img");
    $(".header_nav").toggleClass("open-img");
    $("body").toggleClass("fixed-page");
  });
});

/* Основное меню */

@media (max-width: 1130px) {
  .header_box {
    flex-direction: row-reverse;
    justify-content: end !important;
  }
  .container {
    justify-content: end;
    flex-grow: 0;
    z-index: 1;
    width: auto;
  }
  .header__nav {
    display: block;
    position: absolute;
    top: 55px;
    background: rgb(245, 246, 246);
    width: 100%;
    box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
    transition: all 0.8s ease;
    right: -100%;
  }
  .down:after {
    top: 9px;
  }
  .header__menu {
    position: absolute;
    top: 34px;
    border-radius: 0 0 30px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .header__nav.open-menu {
    right: 0;
  }
  .header__menu li {
    margin: 0 auto;
    padding: 10px 0;
  }
  .menu>li:after {
    content: "";
    display: block;
    width: 0;
    border-bottom: 2px solid #ef6705;
    transition: 0.3s;
    filter: blur(2px);
  }
  .menu>li:hover:after {
    content: "";
    display: block;
    width: 150%;
    border-bottom: 2px solid #ef6705;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%, 0%);
    filter: blur(3px);
  }
  .menu-burger__header {
    position: relative;
    width: 34px;
    height: 34px;
    display: block;
    margin-left: 10px;
    border: 1px solid #ef6705;
    border-radius: 10px;
  }
  .menu-burger__header span,
  .menu-burger__header:after,
  .menu-burger__header:before {
    height: 2px;
    width: 60%;
    left: 7px;
    display: flex;
    margin: 0 auto;
    position: absolute;
    border-radius: 1px;
    background: #515758;
  }
  .menu-burger__header span {
    top: 16px;
  }
  .menu-burger__header:after,
  .menu-burger__header:before {
    content: "";
  }
  .menu-burger__header:after {
    bottom: 5px;
  }
  .menu-burger__header:before {
    top: 5px;
  }
  .menu-burger__header.open-menu span {
    opacity: 0;
    transition: 0.5s;
  }
  .menu-burger__header.open-menu:before {
    transform: rotate(38deg);
    top: 16px;
    transition: 0.4s;
  }
  .menu-burger__header.open-menu:after {
    transform: rotate(-38deg);
    bottom: 16px;
    transition: 0.4s;
  }
  .content-wrapper {
    margin-top: 48px;
  }
  .fixed-pade {
    overflow: hidden;
  }
  /* Иконка */
  @media (max-width: 768px) {
    .menu-burger_img {
      position: relative;
    }
    .header_nav.open-img {
      right: 0;
    }
    .header_nav {
      display: block !important;
      position: absolute;
      top: 55px;
      background: rgb(245, 246, 246);
      width: 100%;
      box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
      transition: all 0.8s ease;
      right: -100%;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_box">
  <div class="container header__container">
    <div class="menu-burger__header">
      <span></span>
    </div>
    <nav class="header__nav">
      <ul class="menu header__menu topmenu">
        <li><a class="navigation__link" href="#">Главная</a></li>
        <li><a href="#" class="down navigation__link">О нас</a>
        </li>
        <li><a href="#" class="down navigation__link">Мероприятия</a>
        </li>
        <li><a href="#" class="down navigation__link">Вступление</a>
        </li>
        <li><a href="#" class="down navigation__link">Трудоустройство</a>
        </li>
      </ul>
    </nav>
  </div>

  <form action="/login">
    <div class="burger_icon">
      <div class="container header__container">
        <div class="menu-burger_img">
          <img src="img/avatar.svg" alt="avatar icon">
        </div>
        <nav class="header_nav">
          <ul class="menu header__menu topmenu">
            <li><a class="navigation__link" href="#">Профиль</a></li>
            <li><a href="#" class="navigation__link">Мой отряд</a></li>
            <li><a href="#" class="navigation__link">Мои мероприятия</a></li>
            <li><a href="#" class="navigation__link">Настройки</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </form>
</div>

Код писался через jquery, поискала пути решения, нашла похожие, но не получается сориентироваться из-за малого опыта.

jquery меню

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Вот сделал пользуйтесь)). Тут нужно было просто добавить код убирающий классы с другого меню и на тег body повесить условие, иначе класс fixed у него бы просто исчезал и появлялся вне зависимости от того, открыто или закрыто меню.
Там есть небольшие изменения в html, css также, сравните и исправьте.

$(document).ready(function() {
  let headerBurger = $(".menu-burger__header");
  let headerBurgerMenu = $(".menu-burger__header + .header__nav");
  let imgBurger = $(".menu-burger_img");
  let imgBurgerMenu = $(".menu-burger_img + .header__nav");
  headerBurger.on("click", function() {
    if (headerBurger.hasClass("open-menu")) {
      $("body").removeClass("fixed-page");
    } else {
      $("body").addClass("fixed-page");
    }
    $(this).toggleClass("open-menu");
    headerBurgerMenu.toggleClass("open-menu");
    imgBurger.removeClass("open-img");
    imgBurgerMenu.removeClass("open-img");
  });

  imgBurger.on("click", function() {
    if (imgBurger.hasClass("open-img")) {
      $("body").removeClass("fixed-page");
    } else {
      $("body").addClass("fixed-page");
    }
    $(this).toggleClass("open-img");
    imgBurgerMenu.toggleClass("open-img");
    headerBurger.removeClass("open-menu");
    headerBurgerMenu.removeClass("open-menu");
  });
});

/* Основное меню */

@media (max-width: 1130px) {
  .header_box {
    flex-direction: row-reverse;
    justify-content: end !important;
  }
  .container {
    justify-content: end;
    flex-grow: 0;
    z-index: 1;
    width: auto;
  }
  .header__nav {
    display: block;
    position: absolute;
    top: 55px;
    background: rgb(245, 246, 246);
    width: 100%;
    box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
    transition: all 0.8s ease;
    right: -100%;
  }
  .down:after {
    top: 9px;
  }
  .header__menu {
    position: absolute;
    top: 34px;
    border-radius: 0 0 30px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .header__nav.open-menu {
    right: 0;
  }
  .header__menu li {
    margin: 0 auto;
    padding: 10px 0;
  }
  .menu>li:after {
    content: "";
    display: block;
    width: 0;
    border-bottom: 2px solid #ef6705;
    transition: 0.3s;
    filter: blur(2px);
  }
  .menu>li:hover:after {
    content: "";
    display: block;
    width: 150%;
    border-bottom: 2px solid #ef6705;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%, 0%);
    filter: blur(3px);
  }
  .menu-burger__header {
    position: relative;
    width: 34px;
    height: 34px;
    display: block;
    margin-left: 10px;
    border: 1px solid #ef6705;
    border-radius: 10px;
  }
  .menu-burger__header span,
  .menu-burger__header:after,
  .menu-burger__header:before {
    height: 2px;
    width: 60%;
    left: 7px;
    display: flex;
    margin: 0 auto;
    position: absolute;
    border-radius: 1px;
    background: #515758;
  }
  .menu-burger__header span {
    top: 16px;
  }
  .menu-burger__header:after,
  .menu-burger__header:before {
    content: "";
  }
  .menu-burger__header:after {
    bottom: 5px;
  }
  .menu-burger__header:before {
    top: 5px;
  }
  .menu-burger__header.open-menu span {
    opacity: 0;
    transition: 0.5s;
  }
  .menu-burger__header.open-menu:before {
    transform: rotate(38deg);
    top: 16px;
    transition: 0.4s;
  }
  .menu-burger__header.open-menu:after {
    transform: rotate(-38deg);
    bottom: 16px;
    transition: 0.4s;
  }
  .content-wrapper {
    margin-top: 48px;
  }
  .fixed-pade {
    overflow: hidden;
  }
  .header__nav.open-img {
    right: 0;
  }
  /* Иконка */
  @media (max-width: 768px) {
    .menu-burger_img {
      position: relative;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_box">
  <div class="container header__container">
    <div class="menu-burger__header">
      <span></span>
    </div>
    <nav class="header__nav">
      <ul class="menu header__menu topmenu">
        <li><a class="navigation__link" href="#">Главная</a></li>
        <li><a href="#" class="down navigation__link">О нас</a>
        </li>
        <li><a href="#" class="down navigation__link">Мероприятия</a>
        </li>
        <li><a href="#" class="down navigation__link">Вступление</a>
        </li>
        <li><a href="#" class="down navigation__link">Трудоустройство</a>
        </li>
      </ul>
    </nav>
  </div>

  <form action="/login">
    <div class="burger_icon">
      <div class="container header__container">
        <div class="menu-burger_img">
          <img src="img/avatar.svg" alt="avatar icon">
        </div>
        <nav class="header__nav">
          <ul class="menu header__menu topmenu">
            <li><a class="navigation__link" href="#">Профиль</a></li>
            <li><a href="#" class="navigation__link">Мой отряд</a></li>
            <li><a href="#" class="navigation__link">Мои мероприятия</a></li>
            <li><a href="#" class="navigation__link">Настройки</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </form>
</div>

Два бургер меню, открыто первом меню, при нажатии на второе, первое автоматически закрывается и наоброт

Ответы