主页 / user-644155

Алина Некрасова's questions

Martin Hope
Алина Некрасова
Asked: 2024-10-29 18:48:49 +0000 UTC
  • 6

在布置站点菜单时可以使用什么工具来实现这种背景模糊。

例如，这是苹果网站：

在此输入图像描述

菜单折叠在上面。展开菜单时，整个页面变得模糊：

在此输入图像描述

或者网站https://vmake.ai是相同的。

菜单展开，下面的页面变得模糊：

在此输入图像描述

我能够自己创建折叠效果，但我仍然不明白如何使页面模糊。 HTML/CSS：

.globalnav {
  height: 50px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.843);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
}

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

nav a {
  display: block;
  text-decoration: none;
  outline: none;
}

.topmenu {
  backface-visibility: hidden;
  height: 50px;
  z-index: 3;
  font-size: 16px;
  margin-top: 6px;
  position: sticky;
  display: flex;
}

.topmenu>li {
  position: relative;
  display: flex;
  padding: 12px 20px 0px 15px;
}

.topmenu>li>a {
  color: rgb(0, 0, 0);
  transition: .4s ease-in-out;
  vertical-align: 100px;
  display: flex;
}

.down:after {
  margin-left: 8px;
}

.topmenu li a:hover {
  color: rgb(23, 129, 226);
}

.submenu {
  background: white;
  position: fixed;
  display: flex;
  justify-content: center;
  left: -0px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  width: 100vw;
  height: 300px;
  transform: translateY(-100px)scaleY(0.1);
  transform-origin: 0% 0%;
  transition: .6s ease-in-out;
  z-index: -1;
}

.sub-menu__container {
  width: 50vw;
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  margin-left: -300px;
}

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

.submenu li a {
  color: rgb(0, 0, 0);
  font-size: 16px;
  line-height: 20px;
  padding: 0 25px;
  transition: .4s ease-in-out;
}

.sub-menu-title {
  color: rgb(0, 0, 0);
  font-size: 13px;
  line-height: 36px;
  padding: 10px 25px;
  transition: .4s ease-in-out;
}

.nav-logo {
  height: 30px;
  position: absolute;
  top: 10px;
  margin: 0 -30px;
}

.menu-link {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.black {
  color: black;
}

.ico {
  font-family: ico;
  font-size: 150%;
  margin-top: -7.5px;
  text-align: center;
}

.blue {
  color: rgb(23, 129, 226);
}
<nav class="globalnav">
  <div class="navbar">
    <ul class="topmenu">
      <li><a class="ico" href="/home.html">🍒</a></li>
      <li class="down"><a href="" class="menu-link">Творчество</a>
        <div class="submenu">
          <div class="sub-menu__container">
            <ul id="menu-1" class="sub">
              <p class="sub-menu-title">Академическая музыыка</p>
              <li><a class="sub-menu-link" href="">Нео-барокко</a></li>
              <li><a class="sub-menu-link" href="">Нео-классика</a></li>
              <li><a class="sub-menu-link" href="">Модерн</a></li>
              <li><a class="sub-menu-link" href="">Современная музыка</a></li>
              <li><a class="sub-menu-link" href="">Религиозная музыка</a></li>
            </ul>
            <ul class="sub">
              <p class="sub-menu-title">Эстрадная музыка</p>
              <li><a class="sub-menu-link" href="">Мюзиклы</a></li>
              <li><a class="sub-menu-link" href="">Песни</a></li>
              <li><a class="sub-menu-link" href="">Саундтреки</a></li>
            </ul>
            <ul class="sub">
              <p class="sub-menu-title">Литература</p>
              <li><a class="sub-menu-link" href="">О музыке</a></li>
              <li><a class="sub-menu-link" href="">Короткие рассказы</a></li>
              <li><a class="sub-menu-link" href="">Повести и романы</a></li>
              <li><a class="sub-menu-link" href="">Театральные постановки</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li><a href="/schedule.html">Афиша</a></li>
      <li><a href="">Блог</a></li>
      <li><a href="">О нас</a></li>
      <li><a class="ico" href="#">🍷</a></li>
    </ul>
  </div>
</nav>

javascript