RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1510910
Accepted
Екатерина
Екатерина
Asked:2023-04-05 18:38:34 +0000 UTC2023-04-05 18:38:34 +0000 UTC 2023-04-05 18:38:34 +0000 UTC

当标签打开时,当汉堡关闭时自动关闭它

  • 772

我有一个带有嵌套链接的菜单,当我们打开菜单汉堡并打开嵌套列表时,折叠时它会折叠成一个汉堡,如果我们关闭汉堡本身,那么打开的标签不会关闭,菜单也不会消失向上。附件是它的外观照片。如何正确设置菜单关闭时自动关闭所有标签的功能?把所有带样式的代码都扔掉,让它更方便。在此处输入图像描述

$(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>

jquery
  • 1 1 个回答
  • 13 Views

1 个回答

  • Voted
  1. Best Answer
    Евгений Ли
    2023-04-05T19:20:05Z2023-04-05T19:20:05Z

    给你,谁这么聪明,打开一个与输入相关的子菜单。您是否被要求尽可能完整地完成站点标记?))
    仅添加到 jquery - accorCheckbox.prop('checked', false); 让 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>

    • 1

相关问题

  • jquery轨道输入点击

  • 滑块光滑 nextSlider + 1

  • jquery选择器+获取值

  • JQ Masked Input电话号码填写时如何避免输入数字7和8?

  • 如何获取相邻父级 jQuery 的元素?

  • 如何解析收到的json响应

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5