如何在我的自定义导航菜单中正确使用点击事件？

Question

我正在尝试创建动画汉堡包 nav 菜单。功能很简单。它将处于固定位置并合并成一个圆圈。当我单击该圆圈时，背景将覆盖整个屏幕并且 nav links 将可见。我使用伪 class 来创建功能。它运行良好，但出现了一个小错误。当我单击 nav link 时，背景应该缩放为 0。但是使用 CSS 无处可做。所以我为此使用了JS点击事件。在菜单保持缩放到 0 单位之后，它在第一次尝试中起作用。我需要修复它，以便 js 单击事件功能在每次尝试时自行重置。 link 如下所示。

codepen here

代码-

const navElement = document.querySelector('.navigation__nav');
const navBackground = document.querySelector('.navigation__background');
const navgationList = document.querySelectorAll('.navigation__item');

navgationList.forEach(function(items) {
  let x = items;
  items.addEventListener('click', closeNav);

  function closeNav() {
    navElement.style.transform = 'scale(0)';
    navBackground.style.transform = 'scale(0)';
  }
});

body {
  background-color: cyan;
}

.navigation__checkbox {
  display: none;
}

.navigation__button {
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  position: fixed;
  top: 6rem;
  right: 6rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
}

@media only screen and (max-width: 56.25em) {
  .navigation__button {
    top: 4rem;
    right: 4rem;
  }
}

@media only screen and (max-width: 37.5em) {
  .navigation__button {
    top: 3rem;
    right: 3rem;
  }
}

.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: radial-gradient(#4ea5f7, #0400ff);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

@media only screen and (max-width: 56.25em) {
  .navigation__background {
    top: 4.5rem;
    right: 4.5rem;
  }
}

@media only screen and (max-width: 37.5em) {
  .navigation__background {
    top: 3.5rem;
    right: 3.5rem;
  }
}

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
}

.navigation__item {
  margin: 1rem;
}

.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 220%;
  transition: all .4s;
}

.navigation__link:link span,
.navigation__link:visited span {
  margin-right: 1.5rem;
  display: inline-block;
}

.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #0400ff;
  transform: translateX(1rem);
}

.navigation__checkbox:checked~.navigation__background {
  transform: scale(80);
}

.navigation__checkbox:checked~.navigation__nav {
  opacity: 1;
  width: 100%;
}

.navigation__icon {
  position: relative;
  margin-top: 3.5rem;
}

.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
  width: 3rem;
  height: 2px;
  background-color: #333;
  display: inline-block;
}

.navigation__icon::before,
.navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all .2s;
}

.navigation__icon::before {
  top: -.8rem;
}

.navigation__icon::after {
  top: .8rem;
}

.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}

.navigation__button:hover .navigation__icon::after {
  top: 1rem;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon {
  background-color: transparent;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg);
}

.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg);
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu</title>
</head>

<body>

  <div class="navigation">
    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
            <span class="navigation__icon">&nbsp;</span>
        </label>
    <div class="navigation__background">&nbsp;</div>
    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item"><a href="#our-works" class="navigation__link"><span>01</span> Our Works</a></li>
        <li class="navigation__item"><a href="#features-section" class="navigation__link"><span>02</span> Features</a></li>
        <li class="navigation__item"><a href="#our-services" class="navigation__link"><span>03</span> Our Services</a></li>
        <li class="navigation__item"><a href="#blog-section" class="navigation__link"><span>04</span> Blogs</a></li>
        <li class="navigation__item"><a href="#contact-us" class="navigation__link"><span>05</span> Contact Us</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"><span>06</span> Know About Author</a></li>
      </ul>
    </nav>
  </div>

</body>

</html>

[p.s.-先把js代码注释掉看看效果如何 CSS.]

虽然这是练习，但任何帮助都会对我理解js和dom有很大帮助。

Answer 1

我对你的 closeNav 函数做了一些修改，以实现你想要的功能。

function closeNav(){
    navElement.style.transform = 'scale(0)';
    navBackground.style.transform = 'scale(0)';
    
    // setTimeout will be useful for resetting our elements once they 
    // reached scale(0)    
    setTimeout(() => {
      // You can check or uncheck a checkbox in javascript using .checked, 
      // here in order to set the styles back to normal.
      document.querySelector('.navigation__checkbox').checked = false;

      // Wait a bit more that the elements have been reset to remove the 
      // styles given in JS above.
      setTimeout(() => {
        navElement.style = '';
        navBackground.style = '';
      }, 500);
    }, 1000);
  }

您需要修改超时，以便它们完全符合您的过渡持续时间！

Answer 2

CSS 已经处理了未选中复选框时发生的情况。这对我来说很好。

function closeNav(){
  document.querySelector('.navigation__checkbox').checked = false;     
}

如何在我的自定义导航菜单中正确使用点击事件？

How can I use click event properly in my custom navigation menu?

html

javascript

css

sass

dom-events