Екатерина提出的问题

Дарья

Asked: 2023-08-10 00:31:47 +0000 UTC

绘制带角的矩形 html+css

你能告诉我如何使用CSS制作这样一个一侧有圆角的矩形吗？

Екатерина

Asked: 2023-04-05 18:38:34 +0000 UTC

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

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

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

绘制带角的矩形 html+css

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

我看不懂措辞

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

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

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

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

Python解析野莓

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

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

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

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

Екатерина's questions