当前位置：首页 > JavaScript

js实现导航菜单

2026-02-28 22:18:49JavaScript

实现导航菜单的基本结构

导航菜单通常由HTML、CSS和JavaScript共同实现。HTML负责结构，CSS负责样式，JavaScript负责交互功能。以下是一个基本的导航菜单实现方式。

<nav id="main-nav">
  <ul>
    <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>
</nav>

添加CSS样式

为导航菜单添加基本样式，使其看起来更美观。

#main-nav {
  background-color: #333;
}

#main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#main-nav li {
  padding: 15px;
}

#main-nav a {
  color: white;
  text-decoration: none;
}

#main-nav a:hover {
  color: #ffcc00;
}

使用JavaScript实现交互功能

通过JavaScript为导航菜单添加交互功能，例如高亮当前选中项或实现下拉菜单。

document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('#main-nav li a');

  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      // 移除所有项的active类
      navItems.forEach(navItem => navItem.classList.remove('active'));
      // 为当前点击项添加active类
      this.classList.add('active');
    });
  });
});

添加下拉菜单功能

如果需要实现下拉菜单，可以扩展HTML结构和JavaScript代码。

<nav id="main-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li class="dropdown">
      <a href="#services">服务</a>
      <ul class="dropdown-content">
        <li><a href="#web">网站开发</a></li>
        <li><a href="#mobile">移动应用</a></li>
      </ul>
    </li>
  </ul>
</nav>

.dropdown {
  position: relative;
}

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

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

响应式导航菜单

针对移动设备，可以实现一个响应式导航菜单，在小屏幕上显示汉堡菜单。

<button id="mobile-menu-btn">☰</button>
<nav id="main-nav">
  <!-- 导航项 -->
</nav>

#mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  #mobile-menu-btn {
    display: block;
  }

  #main-nav ul {
    display: none;
    flex-direction: column;
  }

  #main-nav.active ul {
    display: flex;
  }
}

const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mainNav = document.getElementById('main-nav');

mobileMenuBtn.addEventListener('click', function() {
  mainNav.classList.toggle('active');
});

使用现代JavaScript框架实现

如果使用React等现代框架，导航菜单的实现会更加模块化。

import React, { useState } from 'react';

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

  return (
    <nav>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? '×' : '☰'}
      </button>
      <ul style={{ display: isOpen ? 'flex' : 'none' }}>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
      </ul>
    </nav>
  );
}

动画效果增强

为导航菜单添加平滑的动画效果，提升用户体验。

#main-nav ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#main-nav.active ul {
  max-height: 500px;
}

无障碍访问考虑

确保导航菜单对屏幕阅读器等辅助技术友好。

<nav aria-label="主导航">
  <ul role="menubar">
    <li role="none">
      <a href="#home" role="menuitem">首页</a>
    </li>
  </ul>
</nav>

// 添加键盘导航支持
navItems.forEach((item, index) => {
  item.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
      const nextItem = navItems[(index + 1) % navItems.length];
      nextItem.focus();
    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
      const prevItem = navItems[(index - 1 + navItems.length) % navItems.length];
      prevItem.focus();
    }
  });
});

js实现导航菜单