当前位置：首页 > 文章列表 > 文章 > 前端 > 响应式导航栏教程：下拉与汉堡包实现

响应式导航栏教程：下拉与汉堡包实现

2025-12-10 11:09:35 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《响应式导航栏教程：下拉菜单与汉堡包实现》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

构建响应式导航栏：带下拉菜单与汉堡包菜单的实现教程

本教程详细介绍了如何实现一个功能完善的响应式导航栏，使其在大屏幕上显示为传统菜单和下拉菜单，而在小屏幕上则自动转换为汉堡包菜单。文章将通过优化HTML结构、应用CSS媒体查询实现布局转换，并结合JavaScript为下拉菜单添加平滑的显示/隐藏动画，确保在不同设备上提供一致且友好的用户体验。

响应式导航栏概述

现代网页设计中，响应式导航栏是不可或缺的一部分，它能确保网站在各种屏幕尺寸（从桌面显示器到移动设备）上都能提供最佳的用户体验。本教程将引导您实现一个包含主菜单、下拉菜单，并在小屏幕上自动切换为汉堡包菜单的响应式导航系统。我们将主要通过HTML结构调整、CSS媒体查询和少量的JavaScript来实现这一目标。

HTML 结构设计

为了实现响应式导航，我们需要一个灵活的HTML结构，能够在大屏幕和小屏幕下进行内容和布局的切换。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Business</title>
  <link rel="logo icon" href="framelogoicon.png" />
  <link rel="stylesheet" href="FrameDevG.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://kit.fontawesome.com/afde9d8d8e.js" crossorigin="anonymous"></script>
</head>

<body class="prevent-select">
  <header class="header">
    <div class="container">
      <div class="navbar">
        <div class="logo">
          <a href="">
            <img src="framelogo1.png" alt="Business Sample Logo">
          </a>
        </div>
        <nav>
          <!-- 汉堡包菜单结构：包含一个隐藏的checkbox和label作为按钮 -->
          <div class="hamburger-menu">
            &lt;input id=&quot;menu__toggle&quot; type=&quot;checkbox&quot; /&gt;
            <label class="menu__btn" for="menu__toggle">
              <span></span>
            </label>
            <!-- 主菜单和下拉菜单现在被包裹在 menu__box 中，在小屏幕上作为侧边栏显示 -->
            <ul class="main_menu menu__box">
              <li><a href="index.html" class="menu__item" id="home">Home</a></li>
              <li><a href="FrameDevG.html" class="menu__item" id="gallery">Gallery</a></li>
              <li><a href="FrameDevAbout.html" class="menu__item" id="about-us">About Us</a></li>
              <div class="dropdown">
                <button class="dropbtn" onclick="toggleDropdown()">Book Now<i class="fa fa-sort-desc"></i></button>
                <div class="dropdown-content" id="myDropdown">
                  <a href="#bookframe"><i class="fa-solid fa-music"></i>Music Video</a>
                  <a href="#bookframe"><i class="fa-solid fa-camera"></i>Photography</a>
                  <a href="#bookframe"><i class="fa-solid fa-globe"></i>Website Development</a>
                  <a href="#bookframe"><i class="fa-solid fa-palette"></i>Graphic Design</a>
                  <a href="#bookframe"><i class="fa-solid fa-clapperboard"></i>Commercial</a>
                  <a href="#bookframe"><i class="fa-solid fa-chart-line"></i>Marketing Content</a>
                </div>
              </div>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </header>

HTML 结构要点：

视口设置 (): 这是实现响应式设计的基石，确保页面在移动设备上正确缩放。
汉堡包菜单容器 (.hamburger-menu): 包含一个隐藏的 input[type="checkbox"] (#menu__toggle) 和一个 label (.menu__btn)。checkbox 的 checked 状态将通过 CSS 控制汉堡包菜单的显示与隐藏。
菜单内容 (.main_menu.menu__box): 原有的主菜单 ul 现在同时拥有 main_menu 和 menu__box 类。在小屏幕下，menu__box 类将定义其作为侧边栏菜单的样式。下拉菜单 (.dropdown) 也被放置在这个容器内，以便在移动端统一管理。
下拉菜单 (.dropdown): 包含一个触发按钮 (.dropbtn) 和一个包含链接的 .dropdown-content。

CSS 样式与响应式布局

CSS 是实现导航栏响应式行为的核心。我们将使用 Flexbox 进行布局，并通过媒体查询 (@media) 在不同屏幕尺寸下应用不同的样式。

/* 基础样式 */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

ul {
  list-style: none;
  padding: 0; /* 确保 ul 没有默认内边距 */
  margin: 0; /* 确保 ul 没有默认外边距 */
}

.header {
  padding: 20px 50px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px -3px 21px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  z-index: 1;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 允许内容换行 */
}

.logo img {
  width: 120px;
}

/* 桌面端主菜单样式 */
.header .main_menu {
  display: flex;
  /* gap: 225px; /* 原始样式，可能需要调整 */
}

.header .main_menu li a {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  color: black;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 25px;
  margin: 0px 3px;
}

.header .main_menu li {
  position: relative;
}

#home {
  background-color: #CD285B;
  color: #f1f1f1;
  border-radius: 5px;
}

.main_menu li:hover>a {
  background-color: #FFD7E3;
  border-radius: 5px;
}

/* 下拉菜单按钮样式 */
.dropbtn {
  display: flex;
  align-items: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  background-color: #CD285B;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  height: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn .fa {
  font-size: 12px;
}

.dropbtn .fa {
  padding-left: 10px;
  margin-left: 5px;
}

/* 下拉菜单内容样式 */
.dropdown-content {
  display: none;
  position: absolute;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-top: 25px;
  /* gap: 10px; /* gap 属性不适用于 flex-direction: column 的父元素，应使用 margin 或 padding */
  right: -27%; /* 调整下拉菜单位置 */
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 182px 73px rgba(205, 40, 91, 0.01), 0px 103px 62px rgba(205, 40, 91, 0.05), 0px 46px 46px rgba(205, 40, 91, 0.09), 0px 11px 25px rgba(205, 40, 91, 0.1), 0px 0px 0px rgba(205, 40, 91, 0.1);
  border-radius: 10px;
  width: 235px;
  z-index: 1;
  align-items: center; /* 这会影响 flex-items 的交叉轴对齐 */
  flex-direction: column; /* 添加此属性使链接垂直排列 */
}

.dropdown-content a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  margin: 6px;
  color: black;
  font-size: 16px;
  text-decoration: none;
  width: calc(100% - 12px); /* 确保链接宽度适应父容器 */
}

.dropdown a:hover {
  background-color: #f1f1f1;
  border: 1px solid rgba(219, 0, 84, 0.588);
  margin: 5px;
  border-radius: 10px;
}

.dropdown:hover .dropbtn {
  background-color: #cd285cdc;
  transition: all .3s ease-in-out;
}

.dropdown-content .fa-solid {
  color: #303030;
  font-size: 16px;
  padding-right: 10px;
}

.show {
  display: block;
}

/* 汉堡包菜单的隐藏 checkbox */
#menu__toggle {
  opacity: 0; /* 隐藏 checkbox */
  position: absolute; /* 使其不占据空间 */
  left: -9999px; /* 移出屏幕 */
}

/* 媒体查询：当屏幕宽度小于等于 1320px 时 */
@media (max-width: 1320px) {
  .container {
    width: 100%; /* 容器宽度适应屏幕 */
  }

  .header {
    padding: 20px; /* 调整头部内边距 */
  }

  .navbar {
    justify-content: space-between; /* 确保 logo 和汉堡包按钮两端对齐 */
  }

  /* 隐藏桌面端的主菜单 */
  .header .main_menu {
    display: none;
  }

  /* 汉堡包按钮样式 */
  .menu__btn {
    position: fixed; /* 固定在视口中 */
    top: 20px;
    right: 20px; /* 调整位置到右侧 */
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 2; /* 确保在菜单之上 */
    padding-top: 10px;
    display: block; /* 确保按钮可见 */
  }

  /* 汉堡包图标的三条线 */
  .menu__btn>span,
  .menu__btn>span::before,
  .menu__btn>span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
  }

  .menu__btn>span::before {
    content: '';
    top: -8px;
  }

  .menu__btn>span::after {
    content: '';
    top: 8px;
  }

  /* 汉堡包按钮点击动画 */
  #menu__toggle:checked+.menu__btn>span {
    transform: rotate(45deg);
  }

  #menu__toggle:checked+.menu__btn>span::before {
    top: 0;
    transform: rotate(0deg);
  }

  #menu__toggle:checked+.menu__btn>span::after {
    top: 0;
    transform: rotate(90deg);
  }

  /* 移动端侧边菜单样式 */
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    right: -100%; /* 初始状态隐藏在屏幕右侧 */
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    z-index: 1; /* 确保在内容之上，但在汉堡包按钮之下 */
  }

  /* 汉堡包菜单打开时显示 */
  #menu__toggle:checked~.menu__box {
    right: 0 !important; /* 显示菜单 */
  }

  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }

  .menu__item:hover {
    background-color: #CFD8DC;
  }

  /* 调整下拉菜单在移动端的位置和样式 */
  .dropdown {
    display: block; /* 确保在移动端是块级元素 */
    margin-top: 20px;
    text-align: center; /* 居中按钮 */
  }

  .dropdown .dropbtn {
    width: auto; /* 按钮宽度自适应 */
    margin: 0 auto; /* 按钮居中 */
  }

  .dropdown-content {
    position: static; /* 在移动端取消绝对定位，使其跟随文档流 */
    margin-top: 10px;
    left: auto;
    right: auto;
    width: 90%; /* 适应宽度 */
    max-width: 280px; /* 最大宽度 */
    margin-left: auto;
    margin-right: auto; /* 居中 */
  }
}

CSS 样式要点：

桌面端默认样式: .navbar 使用 Flexbox 实现水平布局，.main_menu 也是 Flexbox，用于排列主导航链接。
下拉菜单样式: .dropdown 和 .dropdown-content 定义了下拉菜单的默认隐藏状态 (display: none;) 和绝对定位。
汉堡包菜单的隐藏 (#menu__toggle): 默认情况下，用于切换汉堡包菜单的 checkbox 是完全隐藏的 (opacity: 0; position: absolute; left: -9999px;)。
媒体查询 (@media (max-width: 1320px)):
- 当屏幕宽度小于等于 1320px 时，触发响应式布局。
- 隐藏桌面菜单: .header .main_menu { display: none; } 会隐藏原有的 Flexbox 布局的主菜单。
- 显示汉堡包按钮: .menu__btn 被设置为 position: fixed; 并定位在屏幕右上角，使其可见。其 span 元素用于绘制三条线，并通过 :before 和 :after 伪元素创建另外两条线。
- 汉堡包动画: 当 #menu__toggle 被选中 (:checked) 时，menu__btn 的 span 元素会通过 transform 属性实现旋转动画，形成“X”形图标。
- 侧边菜单 (.menu__box): 默认情况下，`.