代码之家 › 专栏 › 技术社区 › manofconstsorrow

点击导航项目关闭汉堡菜单

css html javascript

manofconstsorrow · 技术社区 · 9 月前

单击导航项目后,我正试图关闭导航菜单。显然,当导航菜单指向一个新页面时,它将关闭。不幸的是,当导航菜单指向同一页面的锚点时,导航菜单将保持打开状态,覆盖整个页面。我不能说什么是相关的或不相关的,所以我已经包含了大部分代码。在我之前尝试解决这个问题时,我预计菜单会在导航项目上消失,导致定位、点击,但我还没有成功。

const hamburger = document.querySelector(".hamburger");
const border = document.querySelector(".border");
const contactimage = document.querySelector(".contact-image");
const contactBubble = document.querySelector(".contact-bubble");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
  border.classList.toggle("active");
  contactimage.classList.toggle("active");
  contactBubble.classList.toggle("active");
}

.right-section {
  margin: 0;
  margin-top: 40px;
  margin-right: 25px;
  padding: 1rem 1.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right-section ul li {
  list-style: none;
}

.right-section ul li a {
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  color: var(--color-dark);
  font-size: 18px;
}

.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--color-dark);
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 3rem;
}

.nav-link {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
}

.nav-link:hover {
  color: var(--color-secondary-dark);
}

@media only screen and (max-width: 768px) {
  ul {
    display: flex;
  }
  .border {
    position: fixed;
    left: 100%;
    top: 0rem;
    background-color: var(--color-light);
    width: 100%;
    height: 100%;
    transition: 0.3s;
    align-items: center;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  .nav-menu {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 35vh;
  }
  .border.active {
    left: 0;
  }
  .nav-item {
    display: block;
    margin: 10px 0;
  }
  .nav-link {
    color: var(--color-secondary-dark);
  }
  .hamburger {
    display: block;
    cursor: pointer;
    position: fixed;
  }
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

<div class="right-section">
  <div class="border">
    <ul class="nav-menu" id="nav-menu" onclick="menuOnClick()">
      <li class="nav-item">
        <a href="/home.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#about" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#reviews" class="nav-link">Reviews</a>
      </li>
      <li class="nav-item">
        <a href="/faq.html" class="nav-link">FAQ</a>
      </li>
      <li class="nav-item">
        <a href="/contact.html" class="nav-link">Contact</a>
      </li>
    </ul>
  </div>
  <div class="hamburger" id="hamburger" onclick="menuOnClick()">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>

0 回复 | 直到 9 月前