主页 / 问题 / 1598170
Accepted
Алина Некрасова
Asked:2024-10-29 18:48:49 +0000 UTC2024-10-29 18:48:49 +0000 UTC

如何在展开站点菜单时模糊整个页面

  • 772

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

例如，这是苹果网站：

在此输入图像描述

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

在此输入图像描述

或者网站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

1 个回答

  1. Best Answer

    没有javascript也可以实现更优雅的布局，但是由于blur事件只为下拉菜单提供，所以没有它就没有办法，我将首先用一个简单的例子解释我们将做什么：

    .open + main {
  filter: blur(4px);
}
    <nav class="open">
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</nav>
<main>
  <p>содержимое документа</p>
<main>

    正如您所看到的，如果open菜单本身有一个类，则模糊样式将应用于nav相邻标签的内容main。

    现在让我们继续javascript实施。对于“创造力”项目，我们需要模糊效果。就您而言，它具有 class down，这足以识别。为此，我们将监听两个主要事件：将鼠标光标悬停在菜单本身上.globalnav并离开它，同时我们将检查是否位于子菜单内。

    const globalnav = document.querySelector('.globalnav');
globalnav.addEventListener('mouseover', e => {
  if ( e.target.closest('.down') ) {
    globalnav.classList.add('open');
  } else {
    globalnav.classList.remove('open');
  }
});
globalnav.addEventListener('mouseout', e => {
  globalnav.classList.remove('open');
});
    .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;
}

/* добавлено размытие соседнего <main>, но вероятнее всего, что вам будет удобнее охватить куда больше соседей при помощи  '.globalnav.open ~ *'   */
.globalnav.open + main {
  filter: blur(16px);
}

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>
<main>
  <h1>Заголовок</h1>
  <p>Много текста</p>
</main>

    一切都可以变得更简单javascript，但我必须适应你的实现。虽然简单多了？。）

    • 2

相关问题