CSS响应式网页如何实现导航栏折叠效果_media queries与display none控制-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-27 16:23:33

原创

559人浏览过

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

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

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

1. 基础HTML结构

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

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

登录后复制

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

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

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

登录后复制

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

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

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

4. JavaScript控制菜单开关

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

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

查看详情

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

登录后复制

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

5. 可选：添加动画效果

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

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

登录后复制

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

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

以上就是CSS响应式网页如何实现导航栏折叠效果_media queries与display none控制的详细内容，更多请关注php中文网其它相关文章！