当前位置：首页 > 文章列表 > 文章 > 前端 > 响应式导航栏实现方法详解

响应式导航栏实现方法详解

2026-01-09 13:14:35 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS初级项目：响应式导航栏实现方法》，聊聊，我们一起来看看吧！

答案：通过Flexbox布局、媒体查询和JavaScript交互实现响应式导航栏，桌面端水平排列，移动端隐藏菜单并显示汉堡图标，点击可切换垂直菜单显隐状态。

css初级项目中如何实现响应式导航栏

实现一个响应式导航栏是CSS初级项目中的常见需求。核心思路是让导航在桌面端横向展示，在移动端自动变为垂直折叠或汉堡菜单。以下是具体实现方法。

1. 基础HTML结构

先搭建简洁的导航结构，使用nav标签和无序列表：

2. 桌面端样式（默认布局）

使用Flexbox让导航栏水平排列：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

3. 移动端适配（媒体查询 + 隐藏菜单）

当屏幕变小时，隐藏菜单项，显示汉堡图标：

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 70px;
    left: 0;
    height: calc(100vh - 70px);
    width: 100%;
    background: #333;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    transform: translateX(0); /* 默认显示 */
  }

  .nav-links.hidden {
    transform: translateX(-100%); /* 隐藏 */
  }

  .burger {
    display: block;
    cursor: pointer;
  }

  .burger span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    margin: 5px auto;
    transition: 0.3s;
  }

  .burger:hover {
    opacity: 0.8;
  } }

/* 小屏下默认隐藏汉堡 */ .burger {
  display: none;
}