单击链接时如何关闭汉堡菜单？

Question

我正在制作汉堡菜单，如果你可以看到它可以工作，但是当我点击链接时它必须关闭，那么当你点击链接时如何关闭汉堡菜单？

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked~.menu__btn>span {
  transform: rotate(45deg);
}

#menu__toggle:checked~.menu__btn>span::before {
  top: 0;
  transform: rotate(0);
}

#menu__toggle:checked~.menu__btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu__toggle:checked~.menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: absolute;
  top: 22px;
  left: 88%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 2;
}

.menu__btn>span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}

.menu__btn>span::before,
.menu__btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}

.menu__btn>span::before {
  content: '';
  top: -8px;
}

.menu__btn>span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  transition-duration: .25s;
  z-index: 1;
}

.menu__item {
  display: block;
  padding: 12px 24px;
  color: blue;
  font-size: 25px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu__item:hover {
  background-color: #CFD8DC;
}

.nav_desc {
  position: relative;
  text-align: center;
  padding-top: 50px;
  color: blue;
}

<div class="hamburger-menu">
  <input id="menu__toggle" type="checkbox" />
  <label class="menu__btn" for="menu__toggle">
    <span></span>
  </label>

  <ul class="menu__box">
    <li>
      <a class="menu__item" href="/Home">
        Home
      </a>
    </li>
    <li>
      <a class="menu__item" href="/Books">
        Books
      </a>
    </li>
    <li>
      <a class="menu__item" href="/Sale">
        Sale
      </a>
    </li>
    <li>
      <a class="menu__item" href="/Support">
        Support
      </a>
    </li>
    <li>
      <a class="menu__item" href="/About">
        About
      </a>
    </li>
    <li>
      <a class="menu__item" href="/Latest News">
        Latest News
      </a>
    </li>
    <li>
      <a class="menu__item" href="/FAQ">
        FAQ
      </a>
    </li>
    <li class="nav_desc">
      <span>
        A room without books is like a body without a soul.
      </span>
    </li>
  </ul>
</div>

Answer 1

您可以使用javascript手动将用户重定向到与被点击的a标签的href属性值相对应的位置。

在更改浏览器窗口 URL 之前，您可以关闭侧边栏菜单。还要确保阻止点击a 元素的默认行为。

以下 javascript 代码应该适合您。

const linksContainer = document.querySelector('.menu__box');

linksContainer.addEventListener('click', (e) => {
  if (e.target.matches('.menu__item')) {
    // disable default behavior
    e.preventDefault();

    // close the side-bar menu
    closeSideMenu();

    // change the location
   window.location.href = e.target.href;
  }
});

function  closeSideMenu() {
  const sideMenuToggle = document.querySelector('#menu__toggle');
  sideMenuToggle.click();
}