答案：使用原生 javaScript 实现一个结构清晰、样式美观、交互流畅的响应式导航菜单组件，包含语义化html 结构、css样式设计及 javascript 交互逻辑，支持移动端折叠与展开、点击后自动收起、active 状态管理，并可扩展键盘访问与平滑滚动功能。
实现一个简单的导航菜单组件，关键在于结构清晰、样式美观、交互流畅。使用原生 JavaScript 可以轻松完成这一目标，无需依赖框架。下面是一个实用的导航菜单组件实现方式。
1. 基本 HTML 结构
导航菜单通常由一个容器和多个菜单项组成。这里使用语义化的 <nav> 标签，并包含一个可折叠的按钮（用于移动端）。
<nav id="simpleNav"> <div class="nav-header"> <span class="nav-title"> 我的网站 </span> <button class="nav-toggle" aria-label=" 切换菜单 ">☰</button> </div> <ul class="nav-menu"> <li><a href="#home" class="active"> 首页 </a></li> <li><a href="#about"> 关于 </a></li> <li><a href="#services"> 服务 </a></li> <li><a href="#contact"> 联系 </a></li> </ul> </nav>2. css 样式 设计
通过 CSS 设置默认样式，并为移动端添加响应式处理。菜单在小屏幕上默认折叠，点击按钮展开。
.nav-header {display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #333; color: white;} <p>.nav-title {font-size: 1.2rem; font-weight: bold;}</p><p>.nav-toggle {background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; display: none;}</p><p>.nav-menu {list-style: none; margin: 0; padding: 0; display: flex; background-color: #333;}</p><p>.nav-menu li a {display: block; padding: 1rem 1.5rem; color: white; text-decoration: none; transition: background 0.3s;}</p><p>.nav-menu li a:hover, .nav-menu li a.active {background-color: #555;}</p><p>/<em> 响应式：小屏幕下菜单折叠 </em>/ @media (max-width: 768px) {.nav-toggle { display: block;}</p><p>.nav-menu {flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }</p><p>.nav-menu.active {max-height: 300px;} }</p>3. JavaScript 交互逻辑
使用 JavaScript 控制菜单的展开与收起。监听按钮 点击事件，并动态添加或移除 active 类。
立即学习“Java 免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', function () {const navToggle = document.querySelector('.nav-toggle'); const navMenu = document.querySelector('.nav-menu'); <p>navToggle.addEventListener('click', function () {navMenu.classlist.toggle('active'); });</p><p>// 可选：点击菜单项后自动收起（移动端体验更佳）const menuitems = document.querySelectorAll('.nav-menu a'); menuItems.forEach(item => { item.addEventListener('click', function () {if (window.innerWidth <= 768) {navMenu.classList.remove('active'); }</p><pre class='brush:php;toolbar:false;'> // 更新 active 状态 menuItems.forEach(link => link.classList.remove('active')); this.classList.add('active'); });}); });
4. 使用说明与扩展建议
这个组件可以直接嵌入网页中使用。你也可以将其 封装 成一个可复用的函数或类，便于在多个页面调用。
- 支持键盘访问（如 Tab 导航和 Enter 激活）可进一步提升可访问性
- 添加平滑滚动效果：点击锚点链接时使用 scrollIntoView
- 通过数据属性配置菜单项，实现动态渲染
- 配合 路由 系统可升级为单页应用导航
基本上就这些。一个轻量、可维护、响应式的导航菜单组件就这样完成了。不复杂但容易忽略细节，比如状态管理和响应式切换。
