При открытом label, автоматически закрывать его при закрытии бургера

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

У меня есть меню с вложенными ссылками, при сворачивании схлопывает в бургер, когда мы открываем бургер меню и раскрываем вложенный список и если закрываем сам бургер, то у нас не закрывается открытый label и меню не уезжает вверх. Приложила фото, как это выглядит. Как правильно задать функцию, на автоматическое закрытие всех label при закрытии меню? Закинула весь код со стилями, чтобы было удобнее.введите сюда описание изображения

$(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");
  let imgActive = $(".avatar_img");
  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");
    imgActive.removeClass("img_active");
  });

  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");
    imgActive.toggleClass("img_active");
  });
});
* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}


/* АНИМАЦИЯ МЕНЮ */

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  text-decoration: none;
  outline: none;
  transition: 0.4s ease-in-out;
}

.topmenu {
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.8);
}

.topmenu>li {
  display: inline-block;
  position: relative;
}

.down:after {
  content: url(img/chevron.svg);
  margin-left: 5px;
  position: absolute;
  top: -2px;
}

.topmenu li a:hover {
  color: #ef6705;
}

.header_link:hover {
  box-shadow: 0px 10px 10px -5px rgba(239, 103, 5, 0.6);
}

.submenu {
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  transform: perspective(600px) rotateX(-90deg);
  transform-origin: 0% 0%;
  transition: 0.5s ease-in-out;
  min-width: max-content;
}

.menu>li {
  padding: 0 25px;
}

.topmenu>li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: perspective(600px) rotateX(0deg);
}

.submenu li a {
  color: #7f7f7f;
  font-size: 13px;
  line-height: 36px;
  padding: 0 25px;
  font-family: "Kurale", serif;
}


/* БУРГЕР */

.header_link {
  color: #242e31;
  text-decoration: none;
  font-weight: 600;
  display: block;
  color: #333;
  padding: 10px;
}

.header_list {
  display: none;
}

.container {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  width: 100%;
}

.content-wrapper {
  width: 100%;
}

.content-wrapper {
  margin-top: 78px;
  padding: 10px;
  line-height: 34px;
}

.header__nav {
  display: flex;
  align-items: center;
}

.acor-container {
  display: none;
}

@media (max-width: 1130px) {
  .menu_home {
    display: none !important;
  }
  .acor-container {
    display: block !important;
    text-align: center;
  }
  .header_box {
    flex-direction: row-reverse;
    justify-content: end !important;
  }
  .container {
    justify-content: end;
    flex-grow: 0;
    z-index: 2;
    width: auto;
  }
  .header__nav {
    display: block;
    position: absolute;
    right: 0;
    background: rgb(245, 246, 246);
    width: 100%;
    box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
    transition: all 0.8s ease;
    top: -300%;
  }
  .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 {
    top: 55px;
  }
  .header__menu li {
    margin: 0 auto;
    padding: 10px 0;
  }
  .menu>li:after {
    content: "";
    display: block;
    width: 0;
    border-bottom: 1px solid #ef6705;
    transition: 0.3s;
    filter: blur(1px);
  }
  .menu>li:hover:after {
    content: "";
    display: block;
    width: 150%;
    border-bottom: 1px solid #ef6705;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%, 0%);
    filter: blur(1px);
  }
  .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_photo {
    width: 10% !important;
  }
  .header_right {
    margin-right: 20px;
  }
  .header__nav.open-img {
    top: 55px;
  }
}


/* СТИЛИ ЛК */

@media (max-width: 768px) {
  .header_right {
    display: none !important;
  }
  .burger_icon {
    display: block !important;
  }
}


/* Бургер ЛК */

@media (max-width: 768px) {
  .menu-burger_img {
    position: relative;
  }
  .img_active {
    box-shadow: 0 0 10px #ef6705;
    border-radius: 20px;
  }
  .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%;
  }
}

.header_nav {
  display: flex;
  align-items: center;
}


/* Хедер*/

.header {
  box-shadow: 0px 10px 50px 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  position: relative;
}

.header_wrap {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.header_box {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-right: 10px;
}

.header_logos {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.logo1 {
  margin-left: 5px;
  margin-bottom: 8px;
}

.header_navigation {
  max-width: 720px;
  width: 100%;
}

.header_navigation>ul {
  display: flex;
  justify-content: space-between;
}

.header_navigation>ul>li {
  list-style-type: none;
}

.navigation__link {
  text-decoration: none;
  color: #000;
  /* font-family: "Montserrat-Regular"; */
  font-size: 14px;
}

.singup_btn {
  border-radius: 50px;
  background-color: #ffffff;
  font-family: "Montserrat-Regular";
  font-size: 18px;
  color: #000;
  padding: 5px 35px;
  border: 1px solid #ef6705;
  margin-right: 10px;
  cursor: pointer;
}

.singup_btn_img {
  border: none;
  outline: none;
  background: none;
  display: none;
  position: absolute;
  right: -20px;
  bottom: 24px;
}

.singup_btn_img>img {
  width: 15%;
}


/* СТИЛИ ЛК */

.header_right {
  display: flex;
  justify-content: end;
  align-items: center;
}

.header_link_lk {
  text-decoration: none;
  margin-right: 20px;
}

.header_photo {
  width: 15%;
  border-radius: 50px;
}

.burger_icon {
  display: none;
}


/* АККОРДЕОН в бургере*/

.acor-container {
  margin: 20px 0;
  display: none;
}

.acor_a {
  font-family: "Montserrat-Regular";
  font-size: 14px;
  padding: 10px 0;
  color: #000;
}

.acor-container .acor-body {
  width: 100%;
  color: black;
  margin: 0 auto;
  height: 0;
  color: rgba(0, 0, 0, 0);
  transition: padding 0.5s;
  overflow: hidden;
  font-family: "Montserrat-Regular";
  font-size: 14px;
}

.acor-container .acor-body p {
  margin: 0 0 10px;
}

.acor-container label {
  cursor: pointer;
  display: block;
  padding: 7px 20px;
  width: 100%;
  color: black;
  box-sizing: border-box;
  z-index: 100;
  font-family: "Montserrat-Regular";
  font-size: 14px;
  position: relative;
}

.acor-container input {
  display: none;
}

.acor-container label:before {
  content: "\276F";
  float: right;
}

.acor-container input:checked+label:before {
  transition: transform 0.35s;
  transform: rotate(90deg);
}

.acor-container input:checked+label+.acor-body {
  height: auto;
  margin-top: -5px;
  color: #000;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}

.acor_a_wrap {
  position: relative;
}

.acor-container label:after,
.acor_a:after {
  content: "";
  display: none;
  border-bottom: 1px solid #ef6705;
  filter: blur(1px);
}

.acor-container label:hover:after,
.acor_a:hover:after {
  content: "";
  display: block;
  width: 20%;
  border-bottom: 1px solid #ef6705;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 0%);
  filter: blur(1px);
}

.acor-container label:hover,
.acor_a:hover {
  color: #ef6705;
}
<header class="header">
  <div class="header_wrap">
    <div class="header_logos">
      <a href="#"><img src="img/logo_vro.svg" alt="logo"></a>
      <img src="img/logo_rso.svg" alt="logo1" class="logo1">
    </div>
    <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 menu_home">
            <li><a class="navigation__link" href="#">Главная</a></li>
            <li><a href="#" class="down navigation__link">О нас</a>
              <ul class="submenu ul_about">
                <li><a class="header_link navigation__link" href="#">Российские Студенческие
                                            Отряды</a></li>
                <li><a class="header_link navigation__link" href="#">Волгоградское Региональное
                                            Отделение</a></li>
                <li><a class="header_link navigation__link" href="#">Контакты</a></li>
                <li><a class="header_link navigation__link" href="#">Галерея</a></li>
                <li><a class="header_link navigation__link" href="#">Новости</a></li>
              </ul>
            </li>
            <li><a href="#" class="down navigation__link">Мероприятия</a>
              <ul class="submenu ul_events">
                <li><a class="header_link navigation__link" href="#">Поиск по категориям</a></li>
                <li><a class="header_link navigation__link" href="#">Календарь мероприятий</a></li>
                <li><a class="header_link navigation__link" href="#">Мои мероприятия</a></li>
              </ul>
            </li>
            <li><a href="#" class="down navigation__link">Вступление</a>
              <ul class="submenu ul_entry">
                <li><a class="header_link navigation__link" href="#">Как вступить</a></li>
                <li><a class="header_link navigation__link" href="#">Направления</a></li>
                <li><a class="header_link navigation__link" href="#">Отряды</a></li>
              </ul>
            </li>
            <li><a href="#" class="down navigation__link">Трудоустройство</a>
              <ul class="submenu ul_job">
                <li><a class="header_link navigation__link" href="#">Общая информация</a></li>
                <li><a class="header_link navigation__link" href="#">Объекты</a></li>
              </ul>
            </li>
          </ul>

          <div class="acor-container header__menu topmenu">
            <div class="acor_a_wrap">
              <a class="acor_a" href="index.html">Главная</a>
            </div>
            <input type="checkbox" name="acor" id="acor2" />
            <label for="acor2">О нас</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Российские Студенческие Отряды</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Волгоградское Региональное
                                    Отделение</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Контакты</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Галерея</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Новости</a>
            </div>

            <input type="checkbox" name="acor" id="acor3" />
            <label for="acor3">Мероприятия</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Поиск по категориям</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Календарь мероприятий</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Мои мероприятия</a>
            </div>

            <input type="checkbox" name="acor" id="acor4" />
            <label for="acor4">Вступление</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Как вступить</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Направления</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Отряды</a>
            </div>

            <input type="checkbox" name="acor" id="acor5" />
            <label for="acor5">Трудоустройство</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Общая информация</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Объекты</a>
            </div>

          </div>
        </nav>
      </div>

      <form action="/login">
        <div class="header_right">
          <a class="header_link_lk" href="#">Личный кабинет</a>
          <img class="header_photo" src="img/lk.png" alt="avatar">
        </div>
        <div class="burger_icon">
          <div class="container header__container">
            <div class="menu-burger_img">
              <img class="avatar_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>

  </div>
</header>

Ответы

▲ 1Принят

Вот пожалуйста, только кто такой умный открытие подменю привязал к input. Вам что дали задачу сделать максимально конченную разметку сайта?))
добавил лишь в jquery - accorCheckbox.prop('checked', false); и let accorCheckbox = $(".acor-container input[type=checkbox]");

$(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");
  let imgActive = $(".avatar_img");
  let accorCheckbox = $(".acor-container input[type=checkbox]");
  headerBurger.on("click", function() {
    if (headerBurger.hasClass("open-menu")) {
      $("body").removeClass("fixed-page");
      accorCheckbox.prop('checked', false);
    } else {
      $("body").addClass("fixed-page");
    }
    $(this).toggleClass("open-menu");
    headerBurgerMenu.toggleClass("open-menu");
    imgBurger.removeClass("open-img");
    imgBurgerMenu.removeClass("open-img");
    imgActive.removeClass("img_active");
  });

  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");
    imgActive.toggleClass("img_active");
  });
});
* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}


/* АНИМАЦИЯ МЕНЮ */

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  text-decoration: none;
  outline: none;
  transition: 0.4s ease-in-out;
}

.topmenu {
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.8);
}

.topmenu>li {
  display: inline-block;
  position: relative;
}

.down:after {
  content: url(img/chevron.svg);
  margin-left: 5px;
  position: absolute;
  top: -2px;
}

.topmenu li a:hover {
  color: #ef6705;
}

.header_link:hover {
  box-shadow: 0px 10px 10px -5px rgba(239, 103, 5, 0.6);
}

.submenu {
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  transform: perspective(600px) rotateX(-90deg);
  transform-origin: 0% 0%;
  transition: 0.5s ease-in-out;
  min-width: max-content;
}

.menu>li {
  padding: 0 25px;
}

.topmenu>li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: perspective(600px) rotateX(0deg);
}

.submenu li a {
  color: #7f7f7f;
  font-size: 13px;
  line-height: 36px;
  padding: 0 25px;
  font-family: "Kurale", serif;
}


/* БУРГЕР */

.header_link {
  color: #242e31;
  text-decoration: none;
  font-weight: 600;
  display: block;
  color: #333;
  padding: 10px;
}

.header_list {
  display: none;
}

.container {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  width: 100%;
}

.content-wrapper {
  width: 100%;
}

.content-wrapper {
  margin-top: 78px;
  padding: 10px;
  line-height: 34px;
}

.header__nav {
  display: flex;
  align-items: center;
}

.acor-container {
  display: none;
}

@media (max-width: 1130px) {
  .menu_home {
    display: none !important;
  }
  .acor-container {
    display: block !important;
    text-align: center;
  }
  .header_box {
    flex-direction: row-reverse;
    justify-content: end !important;
  }
  .container {
    justify-content: end;
    flex-grow: 0;
    z-index: 2;
    width: auto;
  }
  .header__nav {
    display: block;
    position: absolute;
    right: 0;
    background: rgb(245, 246, 246);
    width: 100%;
    box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.37);
    transition: all 0.8s ease;
    top: -300%;
  }
  .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 {
    top: 55px;
  }
  .header__menu li {
    margin: 0 auto;
    padding: 10px 0;
  }
  .menu>li:after {
    content: "";
    display: block;
    width: 0;
    border-bottom: 1px solid #ef6705;
    transition: 0.3s;
    filter: blur(1px);
  }
  .menu>li:hover:after {
    content: "";
    display: block;
    width: 150%;
    border-bottom: 1px solid #ef6705;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%, 0%);
    filter: blur(1px);
  }
  .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_photo {
    width: 10% !important;
  }
  .header_right {
    margin-right: 20px;
  }
  .header__nav.open-img {
    top: 55px;
  }
}


/* СТИЛИ ЛК */

@media (max-width: 768px) {
  .header_right {
    display: none !important;
  }
  .burger_icon {
    display: block !important;
  }
}


/* Бургер ЛК */

@media (max-width: 768px) {
  .menu-burger_img {
    position: relative;
  }
  .img_active {
    box-shadow: 0 0 10px #ef6705;
    border-radius: 20px;
  }
  .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%;
  }
}

.header_nav {
  display: flex;
  align-items: center;
}


/* Хедер*/

.header {
  box-shadow: 0px 10px 50px 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  position: relative;
}

.header_wrap {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.header_box {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-right: 10px;
}

.header_logos {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.logo1 {
  margin-left: 5px;
  margin-bottom: 8px;
}

.header_navigation {
  max-width: 720px;
  width: 100%;
}

.header_navigation>ul {
  display: flex;
  justify-content: space-between;
}

.header_navigation>ul>li {
  list-style-type: none;
}

.navigation__link {
  text-decoration: none;
  color: #000;
  /* font-family: "Montserrat-Regular"; */
  font-size: 14px;
}

.singup_btn {
  border-radius: 50px;
  background-color: #ffffff;
  font-family: "Montserrat-Regular";
  font-size: 18px;
  color: #000;
  padding: 5px 35px;
  border: 1px solid #ef6705;
  margin-right: 10px;
  cursor: pointer;
}

.singup_btn_img {
  border: none;
  outline: none;
  background: none;
  display: none;
  position: absolute;
  right: -20px;
  bottom: 24px;
}

.singup_btn_img>img {
  width: 15%;
}


/* СТИЛИ ЛК */

.header_right {
  display: flex;
  justify-content: end;
  align-items: center;
}

.header_link_lk {
  text-decoration: none;
  margin-right: 20px;
}

.header_photo {
  width: 15%;
  border-radius: 50px;
}

.burger_icon {
  display: none;
}


/* АККОРДЕОН в бургере*/

.acor-container {
  margin: 20px 0;
  display: none;
}

.acor_a {
  font-family: "Montserrat-Regular";
  font-size: 14px;
  padding: 10px 0;
  color: #000;
}

.acor-container .acor-body {
  width: 100%;
  color: black;
  margin: 0 auto;
  height: 0;
  color: rgba(0, 0, 0, 0);
  transition: padding 0.5s;
  overflow: hidden;
  font-family: "Montserrat-Regular";
  font-size: 14px;
}

.acor-container .acor-body p {
  margin: 0 0 10px;
}

.acor-container label {
  cursor: pointer;
  display: block;
  padding: 7px 20px;
  width: 100%;
  color: black;
  box-sizing: border-box;
  z-index: 100;
  font-family: "Montserrat-Regular";
  font-size: 14px;
  position: relative;
}

.acor-container input {
  display: none;
}

.acor-container label:before {
  content: "\276F";
  float: right;
}

.acor-container input:checked+label:before {
  transition: transform 0.35s;
  transform: rotate(90deg);
}

.acor-container input:checked+label+.acor-body {
  height: auto;
  margin-top: -5px;
  color: #000;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}

.acor_a_wrap {
  position: relative;
}

.acor-container label:after,
.acor_a:after {
  content: "";
  display: none;
  border-bottom: 1px solid #ef6705;
  filter: blur(1px);
}

.acor-container label:hover:after,
.acor_a:hover:after {
  content: "";
  display: block;
  width: 20%;
  border-bottom: 1px solid #ef6705;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 0%);
  filter: blur(1px);
}

.acor-container label:hover,
.acor_a:hover {
  color: #ef6705;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<header class="header">
  <div class="header_wrap">
    <div class="header_logos">
      <a href="#"><img src="img/logo_vro.svg" alt="logo"></a>
      <img src="img/logo_rso.svg" alt="logo1" class="logo1">
    </div>
    <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 menu_home">
            <li><a class="navigation__link" href="#">Главная</a></li>
            <li><a href="#" class="down navigation__link">О нас</a>
              <ul class="submenu ul_about">
                <li><a class="header_link navigation__link" href="#">Российские Студенческие
                                            Отряды</a></li>
                <li><a class="header_link navigation__link" href="#">Волгоградское Региональное
                                            Отделение</a></li>
                <li><a class="header_link navigation__link" href="#">Контакты</a></li>
                <li><a class="header_link navigation__link" href="#">Галерея</a></li>
                <li><a class="header_link navigation__link" href="#">Новости</a></li>
              </ul>
            </li>
            <li><a href="#" class="down navigation__link">Мероприятия</a>
              <ul class="submenu ul_events">
                <li><a class="header_link navigation__link" href="#">Поиск по категориям</a></li>
                <li><a class="header_link navigation__link" href="#">Календарь мероприятий</a></li>
                <li><a class="header_link navigation__link" href="#">Мои мероприятия</a></li>
              </ul>
            </li>
            <li><a href="#" class="down navigation__link">Вступление</a>
              <ul class="submenu ul_entry">
                <li><a class="header_link navigation__link" href="#">Как вступить</a></li>
                <li><a class="header_link navigation__link" href="#">Направления</a></li>
                <li><a class="header_link navigation__link" href="#">Отряды</a></li>
              </ul>
            </li>
            <li><a href="#" class="down navigation__link">Трудоустройство</a>
              <ul class="submenu ul_job">
                <li><a class="header_link navigation__link" href="#">Общая информация</a></li>
                <li><a class="header_link navigation__link" href="#">Объекты</a></li>
              </ul>
            </li>
          </ul>

          <div class="acor-container header__menu topmenu">
            <div class="acor_a_wrap">
              <a class="acor_a" href="index.html">Главная</a>
            </div>
            <input type="checkbox" name="acor" id="acor2" />
            <label for="acor2">О нас</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Российские Студенческие Отряды</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Волгоградское Региональное
                                    Отделение</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Контакты</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Галерея</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Новости</a>
            </div>

            <input type="checkbox" name="acor" id="acor3" />
            <label for="acor3">Мероприятия</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Поиск по категориям</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Календарь мероприятий</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Мои мероприятия</a>
            </div>

            <input type="checkbox" name="acor" id="acor4" />
            <label for="acor4">Вступление</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Как вступить</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Направления</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Отряды</a>
            </div>

            <input type="checkbox" name="acor" id="acor5" />
            <label for="acor5">Трудоустройство</label>
            <div class="acor-body">
              <a class="header_link navigation__link" href="coming_soon_page.html">Общая информация</a>
              <a class="header_link navigation__link" href="coming_soon_page.html">Объекты</a>
            </div>

          </div>
        </nav>
      </div>

      <form action="/login">
        <div class="header_right">
          <a class="header_link_lk" href="#">Личный кабинет</a>
          <img class="header_photo" src="img/lk.png" alt="avatar">
        </div>
        <div class="burger_icon">
          <div class="container header__container">
            <div class="menu-burger_img">
              <img class="avatar_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>

  </div>
</header>