汉堡导航栏 具体代码 html css js

好的，以下是一个简单的汉堡导航栏的 HTML、CSS 和 JavaScript 代码示例：

HTML 代码：

<div class="navbar">
  <div class="hamburger">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS 代码：

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  z-index: 9999;
}

.hamburger {
  cursor: pointer;
}

.line {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px;
  transition: all 0.3s ease;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-links li {
  margin: 0 10px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
}

.nav-active {
  transform: translateX(0%);
}

.nav-inactive {
  transform: translateX(100%);
}

JavaScript 代码：

const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');

hamburger.addEventListener('click', () => {
  // Toggle Nav
  navLinks.classList.toggle('nav-active');

  // Animate Links
  links.forEach((link, index) => {
    if (link.style.animation) {
      link.style.animation = '';
    } else {
      link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
    }
  });

  // Hamburger Animation
  hamburger.classList.toggle('toggle');
});

希望这个示例能帮助您实现一个简单的汉堡导航栏效果！