js实现menu

使用JavaScript实现Menu菜单

基础HTML结构

<div class="menu">
  <button class="menu-btn">菜单</button>
  <ul class="menu-items">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>

CSS样式

.menu {
  position: relative;
  display: inline-block;
}

.menu-btn {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.menu-items {
  display: none;
  position: absolute;
  background: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.menu-items li {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.menu-items li:hover {
  background: #ddd;
}

.menu-items.show {
  display: block;
}

JavaScript实现

const menuBtn = document.querySelector('.menu-btn');
const menuItems = document.querySelector('.menu-items');

menuBtn.addEventListener('click', () => {
  menuItems.classList.toggle('show');
});

// 点击页面其他地方关闭菜单
document.addEventListener('click', (event) => {
  if (!event.target.matches('.menu-btn')) {
    menuItems.classList.remove('show');
  }
});

响应式导航菜单实现

HTML结构

<nav class="navbar">
  <div class="navbar-brand">LOGO</div>
  <button class="navbar-toggle">☰</button>
  <ul class="navbar-nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

CSS样式

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #333;
}

.navbar-brand {
  color: white;
  font-size: 1.5rem;
}

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.navbar-nav {
  display: flex;
  list-style: none;
}

.navbar-nav li a {
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

@media (max-width: 768px) {
  .navbar-toggle {
    display: block;
  }

  .navbar-nav {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .navbar-nav.show {
    display: flex;
  }
}

JavaScript实现

const toggleBtn = document.querySelector('.navbar-toggle');
const navMenu = document.querySelector('.navbar-nav');

toggleBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show');
});

下拉菜单实现

HTML结构

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

CSS样式

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

JavaScript增强

document.querySelectorAll('.dropdown').forEach(dropdown => {
  const btn = dropdown.querySelector('.dropbtn');
  const content = dropdown.querySelector('.dropdown-content');

  btn.addEventListener('click', () => {
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  });

  // 点击其他地方关闭
  document.addEventListener('click', (e) => {
    if (!dropdown.contains(e.target)) {
      content.style.display = 'none';
    }
  });
});

带动画效果的菜单

CSS添加过渡效果

.menu-items {
  /* 其他样式... */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-items.show {
  opacity: 1;
  transform: translateY(0);
}

JavaScript优化

menuBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  menuItems.classList.toggle('show');
});

document.addEventListener('click', () => {
  menuItems.classList.remove('show');
});

以上实现方案提供了多种菜单交互方式，可以根据具体需求选择适合的方案或组合使用。