CSS响应式网页如何实现导航栏折叠效果_media queries与display none控制

技术教程
2025-11-27 16:23:33

通过CSS媒体查询和J*aScript实现移动端汉堡菜单。1. 构建包含导航项和切换按钮的HTML结构；2. 桌面端默认显示水平导航，隐藏按钮；3. 屏幕小于768px时，显示汉堡按钮并隐藏导航菜单；4. 点击按钮通过J*aScript切换active类控制菜单显隐；5. 可用max-height过渡实现滑动动画效果，提升用户体验。

css响应式网页如何实现导航栏折叠效果_media queries与display none控制

在移动端设备上，屏幕宽度有限，传统的水平导航栏可能无法完整显示。通过CSS的媒体查询（@media）结合 display: none 与 display: block 的切换，可以实现导航栏在小屏幕上折叠成“汉堡菜单”的效果。以下是具体实现方法。

1. 基础HTML结构

构建一个包含导航栏和切换按钮的基本结构：

<n* class="n*bar">
  <div class="n*-toggle" id="mobile-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="n*-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</n*>

2. 默认样式：桌面端显示完整导航

在大屏幕上，导航项水平排列，隐藏切换按钮：

.n*bar {
  background: #333;
  padding: 1rem;
}
<p>.n*-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}</p><p>.n*-menu li {
margin: 0 1rem;
}</p><p>.n*-menu a {
color: white;
text-decoration: none;
}</p><p>.n*-toggle {
display: none; /<em> 桌面端隐藏 </em>/
}</p>

3. 媒体查询：移动端折叠导航

当屏幕宽度小于768px时，使用媒体查询隐藏默认菜单，显示汉堡按钮，并设置折叠菜单初始为隐藏状态：

@media (max-width: 768px) {
  .n*-toggle {
    display: block; /* 显示汉堡按钮 */
    cursor: pointer;
  }
<p>.n*-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 5px 0;
display: block;
transition: 0.3s;
}</p><p>.n*-menu {
display: none; /<em> 默认隐藏菜单 </em>/
flex-direction: column;
background: #444;
width: 100%;
text-align: center;
margin-top: 1rem;
}</p><p>.n*-menu.active {
display: flex; /<em> 激活时显示 </em>/
}
}</p>

4. J*aScript控制菜单开关

添加简单脚本控制菜单的展开与收起：

AppStruct

无代码应用开发平台

132 查看详情 AppStruct

const mobileMenu = document.getElementById('mobile-menu');
const n*Menu = document.querySelector('.n*-menu');
<p>mobileMenu.addEventListener('click', () => {
n*Menu.classList.toggle('active');
});</p>

点击汉堡按钮时，.n*-menu 切换 active 类，从而改变其 display 属性，在 none 与 flex 之间切换，实现显示与隐藏。

5. 可选：添加动画效果

为了让菜单出现更自然，可配合 max-height 实现滑动展开（因 display 不支持过渡动画）：

@media (max-width: 768px) {
  .n*-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
<p>.n*-menu.active {
max-height: 300px; /<em> 足够容纳所有菜单项 </em>/
display: flex; /<em> 仍需 display 控制布局 </em>/
}
}</p>

这样在切换时会有平滑展开效果，视觉体验更好。

基本上就这些。利用 media queries 判断屏幕尺寸，用 display 控制元素显隐，再加一点J*aScript交互，就能实现响应式导航栏的折叠功能。不复杂但容易忽略细节，比如初始隐藏、类名切换和移动端适配断点选择。