js实现menu

实现基本的HTML结构

使用HTML创建一个简单的菜单结构，通常包含<ul>和<li>元素。以下是一个基础示例：

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

添加CSS样式

为菜单添加基础样式，例如水平排列、悬停效果等：

.menu {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
  background-color: #f0f0f0;
  padding: 10px;
}

.menu li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

.menu li a:hover {
  background-color: #ddd;
  border-radius: 4px;
}

使用JavaScript实现交互功能

通过JavaScript实现下拉菜单或动态效果。以下是一个下拉菜单的实现示例：

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
  </ul>
</nav>

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu > li');

  menuItems.forEach(item => {
    item.addEventListener('mouseenter', function() {
      const submenu = this.querySelector('.submenu');
      if (submenu) submenu.style.display = 'block';
    });

    item.addEventListener('mouseleave', function() {
      const submenu = this.querySelector('.submenu');
      if (submenu) submenu.style.display = 'none';
    });
  });
});

响应式设计适配移动端

通过媒体查询和JavaScript实现移动端适配，例如汉堡菜单：

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    display: none;
  }

  .menu.active {
    display: flex;
  }

  .hamburger {
    display: block;
    cursor: pointer;
  }
}

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', function() {
  menu.classList.toggle('active');
});

使用框架或库简化开发

如果需要快速实现复杂菜单，可以借助库如React或Vue。以下是React实现的一个示例：

import React, { useState } from 'react';

function Menu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav>
      <button onClick={() => setIsOpen(!isOpen)}>菜单</button>
      {isOpen && (
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">产品</a></li>
        </ul>
      )}
    </nav>
  );
}