响应式导航栏通过Flexbox和媒体查询实现多设备适配，小屏显示汉堡菜单，大屏横向布局。1. HTML用nav、ul和div构建结构；2. CSS设flex布局与隐藏/显示切换；3. 媒体查询在768px以下触发移动端样式；4. JavaScript控制菜单点击展开收起；5. 注意定位、过渡与可访问性细节优化体验。
制作响应式导航栏的关键在于让导航在不同屏幕尺寸下都能良好显示，小屏幕上可以折叠成汉堡菜单，大屏幕上则展开为横向布局。下面是一个简单实用的实现方法。
HTML结构设计
导航栏的基本结构使用无序列表和语义化标签，便于样式控制和可访问性。
CSS基础样式与响应式布局
使用Flexbox布局让导航栏在桌面端横向排列，并通过媒体查询在移动端折叠。
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem;
}
.nav-brand {
color: white;
font-size: 1.5rem;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: 0.3s;
}
移动端适配与汉堡菜单
当屏幕变小时，隐藏菜单项，显示汉堡图标，并通过JavaScript控制展开收起。
启山智软物流配送系统
下载
启山智软物流配送是基于Spring Cloud 和 Vue.js的JAVA物流配送系统。包含总控制后台 、城市合伙人(商家pc端)、 区域团长后台 、用户端小程序 、手机H5等多个操作模块。为响应用户需求我们新增了后台自定义装修组件模块，使页面更加美观，操作更加灵活简便。淘宝商品CSV一键导入，提升用户使用感。还有与众不同的管理台侧边栏设计，打破传统管理台样式。 另有公众号接龙、引导页上传、区域团
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
background-color: #333;
position: absolute;
top: 100%;
left: 0;
}
.nav-menu.active {
display: flex;
}
.hamburger {
display: flex;
}
}
配合一小段JavaScript实现点击切换：
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
navMenu.classList.toggle("active");
});
基本上就这些。通过Flexbox、媒体查询和简单的JS交互，就能实现一个美观且实用的响应式导航栏。关键是结构清晰、样式分离、行为可控。不复杂但容易忽略细节，比如移动端的定位和过渡效果。
