如何重新创建导航动画

Question

我正在尝试从此website复制导航栏，无法解决以下两件事：

1. 在子菜单悬停时创建页面背景叠加层
2. 如何使子菜单在链接悬停时具有相同的展开显示。

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

a {
  text-decoration: none;
}

.main {
  width: 100%;
}

.section {
  width: 100%;
  background: #ededed;
}


.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 1100px;
  margin: auto;
  position: relative;
  padding: 0 40;
}

.nav li {
  color: #000;
}

.nav li a {
  cursor: pointer
}

.nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  width: fit-content;
}

.nav ul:hover li {
  color: #eee;
  padding-bottom: 20px;
}

.nav ul li:hover {
  color: #333;
  padding-bottom: 20px;
}

.nav li:last-child {
  margin: 0;
}

.nav ul li {
  display: inline-block;
  padding: 0 35px 20px 0;
}

.three:hover>.sub-menu {
  display: flex;
  opacity: 1;
  height: 200px;
}

.sub-menu {
  height: 0px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 100%;
  background: #2E2E2E;
  display: none;
  opacity: 0;
  left: 0;
  right: 0;
}

.col-1-4 {
  height: 100%;
  width: 25%;
  position: relative;
}

.service {
  padding: 20%;
}

.nav.servicesIsHovered {
  background-color: #272727;
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu">
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
        </div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>

我以前尝试通过在代码末尾添加一个单独的div并将不透明度设置为零来使覆盖层起作用，然后添加更多代码将不透明度更改为1，但是失败了。

实现以上两个方面的最佳实践是什么？

Answer 1

使用绝对定位完成子菜单，直到容器没有任何定位（或默认的静态定位）为止，使所有祖先向上，因此子菜单绝对定位在容器上。

展开显示是使用高度动画完成的-子菜单具有固定的高度，该高度会在父li悬停时进行动画显示

使用固定的位置和javascript完成覆盖-每当您看到内联样式发生这样的变化时，您就知道它是js动画而不是css。

下面，我添加了jQuery，并展示了他们可能如何完成的快速演示

var $overlay = $('.overlay');
$('.sub-menu').parent()
    .on('mouseenter', function() {
      $overlay.fadeIn('fast');
    })
    .on('mouseleave', function() {
      $overlay.fadeOut('fast');
    });

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

a {
  text-decoration: none;
}

.main {
  width: 100%;
}

.section {
  width: 100%;
  background: #ededed;
}

.header {
  z-index: 2;
  position: relative;
  display: flex;
  width: 100%;
  background:blue; /* needs a colour so you cannot see overlay behind */
}

.nav {
  width: 1100px;
  margin: auto;
  position: relative;
  padding: 0 40;
}

.nav li {
  color: #000;
}

.nav li a {
  cursor: pointer
}

.nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  width: fit-content;
}

.nav ul:hover li {
  color: #eee;
  padding-bottom: 20px;
}

.nav ul li:hover {
  color: #333;
  padding-bottom: 20px;
}

.nav li:last-child {
  margin: 0;
}

.nav ul li {
  display: inline-block;
  padding: 0 35px 20px 0;
}

li:hover>.sub-menu {
  height: 200px;
}

.sub-menu {
  height: 0px;
  overflow: hidden;
  /* hide the overflow so you don't need to worry about display and opacity */
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 100%;
  background: #2E2E2E;
  left: 0;
  right: 0;
  transition: height 1s ease;
  /* add this for your animation and remove display none */
}

.col-1-4 {
  height: 100%;
  width: 25%;
  position: relative;
}

.service {
  padding: 20%;
}

.nav.servicesIsHovered {
  background-color: #272727;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  display:none;
  /* above the body but below the header */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu">
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
          <div class="col-1-4"></div>
        </div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>
<div class="overlay"></div>