使用JavaScript实现一个简单的导航菜单组件_javascript UI组件-js教程-PHP中文网

使用JavaScript实现一个简单的导航菜单组件_javascript UI组件

夢幻星辰

发布： 2025-11-02 04:43:18

原创

436人浏览过

答案：使用原生JavaScript实现一个结构清晰、样式美观、交互流畅的响应式导航菜单组件，包含语义化HTML结构、CSS样式设计及JavaScript交互逻辑，支持移动端折叠与展开、点击后自动收起、active状态管理，并可扩展键盘访问与平滑滚动功能。

使用javascript实现一个简单的导航菜单组件_javascript ui组件

实现一个简单的导航菜单组件，关键在于结构清晰、样式美观、交互流畅。使用原生 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免费学习笔记（深入）”；

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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');
});

登录后复制

}); });