当前位置：首页 > JavaScript

js实现menu

2026-03-14 13:05:54JavaScript

JavaScript 实现菜单功能

使用 JavaScript 实现菜单功能通常涉及动态创建菜单项、处理点击事件以及控制菜单的显示与隐藏。以下是几种常见的实现方式：

动态创建下拉菜单

通过 JavaScript 动态生成下拉菜单结构，并添加事件监听器控制显示与隐藏。

js实现menu

// 获取菜单容器
const menuContainer = document.getElementById('menu-container');

// 菜单数据
const menuItems = [
  { text: '首页', link: '#' },
  { text: '产品', link: '#', subItems: [
    { text: '产品1', link: '#' },
    { text: '产品2', link: '#' }
  ]},
  { text: '关于我们', link: '#' }
];

// 生成菜单
function createMenu() {
  const ul = document.createElement('ul');
  ul.className = 'main-menu';

  menuItems.forEach(item => {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = item.link;
    a.textContent = item.text;
    li.appendChild(a);

    if (item.subItems) {
      const subUl = document.createElement('ul');
      subUl.className = 'sub-menu';
      item.subItems.forEach(subItem => {
        const subLi = document.createElement('li');
        const subA = document.createElement('a');
        subA.href = subItem.link;
        subA.textContent = subItem.text;
        subLi.appendChild(subA);
        subUl.appendChild(subLi);
      });
      li.appendChild(subUl);
    }

    ul.appendChild(li);
  });

  menuContainer.appendChild(ul);
}

// 初始化菜单
createMenu();

// 添加事件监听
document.querySelectorAll('.main-menu > li').forEach(li => {
  li.addEventListener('mouseenter', () => {
    const subMenu = li.querySelector('.sub-menu');
    if (subMenu) subMenu.style.display = 'block';
  });
  li.addEventListener('mouseleave', () => {
    const subMenu = li.querySelector('.sub-menu');
    if (subMenu) subMenu.style.display = 'none';
  });
});

响应式移动菜单

针对移动设备创建可折叠的汉堡菜单。

// 获取元素
const hamburger = document.querySelector('.hamburger');
const mobileMenu = document.querySelector('.mobile-menu');

// 切换菜单显示
hamburger.addEventListener('click', () => {
  mobileMenu.classList.toggle('active');
  hamburger.classList.toggle('is-active');
});

对应的 CSS 样式：

js实现menu

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

.mobile-menu {
  display: none;
}

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

  .mobile-menu.active {
    display: block;
  }
}

上下文菜单实现

创建自定义右键上下文菜单。

// 创建上下文菜单
const contextMenu = document.createElement('div');
contextMenu.id = 'context-menu';
contextMenu.innerHTML = `
  <ul>
    <li data-action="copy">复制</li>
    <li data-action="paste">粘贴</li>
    <li data-action="delete">删除</li>
  </ul>
`;
document.body.appendChild(contextMenu);

// 显示/隐藏菜单
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  contextMenu.style.display = 'block';
  contextMenu.style.left = `${e.pageX}px`;
  contextMenu.style.top = `${e.pageY}px`;
});

document.addEventListener('click', () => {
  contextMenu.style.display = 'none';
});

// 菜单项点击处理
contextMenu.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', () => {
    const action = item.getAttribute('data-action');
    console.log(`执行操作: ${action}`);
    contextMenu.style.display = 'none';
  });
});

动画菜单效果

为菜单添加平滑的动画过渡效果。

// 获取菜单元素
const navMenu = document.querySelector('.nav-menu');
const menuItems = document.querySelectorAll('.nav-menu li');

// 添加悬停动画
menuItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.style.transform = 'translateY(-5px)';
    item.style.transition = 'transform 0.3s ease';
  });

  item.addEventListener('mouseleave', () => {
    item.style.transform = 'translateY(0)';
  });
});

// 菜单滑动效果
function toggleMenu() {
  navMenu.classList.toggle('open');
  if (navMenu.classList.contains('open')) {
    navMenu.style.maxHeight = `${navMenu.scrollHeight}px`;
  } else {
    navMenu.style.maxHeight = '0';
  }
}

这些实现方式涵盖了常见的菜单需求，可以根据具体项目要求进行调整和组合使用。