实现响应式导航栏与下拉菜单：桌面端与移动端的完美适配

心靈之曲

发布时间：2025-11-18 12:04:38

865人浏览过

来源于php中文网

原创

实现响应式导航栏与下拉菜单：桌面端与移动端的完美适配

本教程将指导您如何构建一个功能完善的响应式导航栏，该导航栏在桌面端提供直观的下拉菜单，并在小屏幕设备上优雅地转换为汉堡菜单。我们将结合 html 结构、css 样式和 javascript 交互，确保导航系统在不同视口下都能提供流畅且一致的用户体验。

在现代网页设计中，导航栏的响应式设计至关重要，它确保了用户无论使用桌面电脑、平板还是手机，都能获得最佳的浏览体验。本教程将通过实际代码示例，详细阐述如何实现一个具备下拉菜单功能，并在小屏幕下自动转换为汉堡菜单的响应式导航系统。

1. HTML 结构：构建导航骨架

首先，我们需要一个清晰、语义化的 HTML 结构来承载导航栏的所有元素。这包括品牌 Logo、主导航链接、带有子菜单的下拉项，以及用于移动端的汉堡菜单触发器。

<!DOCTYPE html>
<html lang="zh-CN">
<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>响应式导航栏示例</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>
          <!-- 汉堡菜单结构开始 -->
          <div class="hamburger-menu">
            <!-- 隐藏的复选框，用于控制菜单开关 -->
            <input id="menu__toggle" type="checkbox" />
            <!-- 汉堡图标按钮 -->
            <label class="menu__btn" for="menu__toggle">
              <span></span>
            </label>
            <!-- 主菜单列表，在小屏幕下作为汉堡菜单内容 -->
            <ul class="main_menu menu__box">
              <li><a href="index.html" class="menu__item" id="home">首页</a></li>
              <li><a href="FrameDevG.html" class="menu__item" id="gallery">画廊</a></li>
              <li><a href="FrameDevAbout.html" class="menu__item" id="about-us">关于我们</a></li>
              <!-- 下拉菜单项 -->
              <div class="dropdown">
                <button class="dropbtn" onclick="toggleDropdown()">立即预订<i class="fa fa-sort-desc"></i></button>
                <div class="dropdown-content" id="myDropdown">
                  <a href="#bookframe"><i class="fa-solid fa-music"></i>音乐视频</a>
                  <a href="#bookframe"><i class="fa-solid fa-camera"></i>摄影</a>
                  <a href="#bookframe"><i class="fa-solid fa-globe"></i>网站开发</a>
                  <a href="#bookframe"><i class="fa-solid fa-palette"></i>平面设计</a>
                  <a href="#bookframe"><i class="fa-solid fa-clapperboard"></i>商业广告</a>
                  <a href="#bookframe"><i class="fa-solid fa-chart-line"></i>营销内容</a>
                </div>
              </div>
            </ul>
          </div>
          <!-- 汉堡菜单结构结束 -->
        </nav>
      </div>
    </div>
  </header>
  <!-- 页面其他内容 -->
</body>
</html>

关键点解析：

AITDK

免费AI SEO工具，SEO的AI生成器

下载

<meta name="viewport" ...>: 这是响应式设计的基石，确保页面在不同设备上正确缩放。
.header: 整个导航栏的容器，通常会设置固定定位或背景样式。
.navbar: 使用 Flexbox 布局，使其内部元素（Logo、导航菜单、下拉按钮）能够灵活排列。
.main_menu: 主导航链接列表。
.dropdown: 包含一个触发按钮 (.dropbtn) 和一个隐藏的下拉内容 (.dropdown-content)。
.hamburger-menu: 这是实现汉堡菜单的关键容器。
- <input type="checkbox" id="menu__toggle">: 一个隐藏的复选框，其 checked 状态将通过 CSS 控制汉堡菜单的显示与隐藏。
- <label class="menu__btn" for="menu__toggle">: 这是我们看到的汉堡图标，点击它会切换 menu__toggle 复选框的状态。
- <ul class="main_menu menu__box">: 在小屏幕下，主菜单会被重新包装并作为汉堡菜单的内容。

2. CSS 样式：美化与响应式布局

CSS 负责导航栏的视觉呈现和响应式行为。我们将定义通用样式、下拉菜单样式，并通过媒体查询实现小屏幕下的汉堡菜单。

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

ul {
  list-style: none;
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
}

.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);
  /* position: fixed; */ /* 根据需求决定是否固定顶部 */
  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; /* 桌面端主菜单横向排列 */
}

.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;
  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;
}

.dropdown-content a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  margin: 6px;
  color: black;
  font-size: 16px;
  text-decoration: none;
}

.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;
}

/* JavaScript 控制的显示类 */
.show {
  display: block;
}

/* 响应式样式：汉堡菜单 */
/* 隐藏汉堡菜单的复选框 */
#menu__toggle {
  opacity: 0; /* 视觉上隐藏 */
  visibility: hidden; /* 确保不占用空间 */
}

@media (max-width: 1320px) {
  .container {
    width: 100%; /* 小屏幕下容器占满宽度 */
  }

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

  .navbar {
    justify-content: space-between; /* 确保 Logo 和汉堡按钮对齐 */
    position: relative; /* 确保汉堡菜单可以相对定位 */
  }

  /* 汉堡按钮样式 */
  .menu__btn {
    position: absolute; /* 绝对定位，方便控制位置 */
    top: 20px;
    right: 20px; /* 调整到右侧 */
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 2; /* 确保在菜单上方 */
    padding-top: 10px;
  }

  .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;
    left: -100%; /* 默认隐藏在屏幕左侧 */
    width: 300px;
    max-width: 80%; /* 限制最大宽度 */
    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 {
    left: 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;
  }

  /* 隐藏桌面端主菜单，显示汉堡菜单 */
  .header .main_menu {
    display: none; /* 默认隐藏主菜单 */
  }

  .hamburger-menu {
    display: block; /* 显示汉堡菜单容器 */
  }

  /* 调整下拉菜单在移动端的位置和样式 */
  .dropdown {
    width: 100%; /* 下拉菜单在移动端占据全部宽度 */
    text-align: center;
  }

  .dropdown-content {
    position: static; /* 移动端下拉内容变为静态定位 */
    width: auto; /* 宽度自适应 */
    margin: 10px auto; /* 居中 */
    box-shadow: none; /* 移除阴影 */
    border: none; /* 移除边框 */
    background-color: transparent; /* 背景透明 */
  }

  .dropdown-content a {
    justify-content: center; /* 居中对齐 */
    padding: 8px 15px;
  }
}

关键点解析：