前端必学！使用CSS轻松实现响应式导航栏！

小那同学

已于 2024-08-29 10:24:30 修改

阅读量59

点赞数 3

文章标签： css 前端

于 2024-08-28 22:42:07 首次发布

本文链接：https://blog.csdn.net/bjjgff/article/details/141651667

版权

阅读建议：跟着文章敲一下，不建议直接粘贴代码。

概述

在现代Web开发中，响应式设计是实现优质用户体验的关键。响应式导航栏不仅能够适应不同设备的屏幕尺寸，还能在移动设备和桌面设备上提供一致的交互体验。本文将通过一个具体的示例，讲解如何使用HTML和CSS实现一个响应式的导航栏。

HTML结构解析

首先，我们定义了导航栏的基本HTML结构：


    <nav class="navbar">
      <button
        onclick="document.body.classList.toggle('open')"
        class="burger"
      ></button>
      <h1>那</h1>
      <div class="dropdowns">
        <div class="dropdown">
          <button>
            服务
            <img src="chevron.svg" />
          </button>
          <div class="dropdown-menu">
            <button>Web应用程序</button>
            <button>python程序</button>
            <button>前端页面开发</button>
          </div>
        </div>
        <div class="dropdown">
          <button>
            产品
            <img src="chevron.svg" />
          </button>
          <div class="dropdown-menu">
            <button>学习CSS电子书</button>
            <button>安全课程</button>
            <button>保姆级教程</button>
          </div>
        </div>
        <div class="dropdown">
          <button>
            支持
            <img src="chevron.svg" />
          </button>
          <div class="dropdown-menu">
            <button>在线聊天</button>
            <button>发送邮箱</button>
            <button>在线帮助</button>
          </div>
        </div>
      </div>
    </nav>

导航栏 `nav`

导航栏由一个 <nav> 元素包裹，里面包含了三个主要部分：

burger 按钮：用于在移动设备上展开或收起导航栏。
标题 <h1>：用于显示网站的标志或标题。
dropdowns：一个包含多个下拉菜单的容器，每个下拉菜单对应不同的导航选项。

下拉菜单 `dropdown`

每个导航选项通过 .dropdown 类定义，其中包含一个按钮和一个下拉菜单：

按钮 <button>：显示导航选项，并在右侧附带一个指示图标（如 chevron.svg）。
下拉菜单 .dropdown-menu：包含多个子选项，用户点击主按钮后可以展开这些子选项。

CSS样式解析

接下来，让我们逐步解析CSS样式，以实现响应式导航栏的设计。

基础样式

body 设置了整体背景颜色为深色。
button 元素继承父元素的字体颜色，背景设为透明，并移除了默认边框，以简化外观。
h1 元素用作导航栏的标题，其设计为一个圆形背景的元素，并使用 backdrop-filter 增加模糊效果。

body {
    background: #141417;
}

button {
    font-size: 20px;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

h1 {
    width: 38px;
    height: 38px;
    font-size: 18px;
    font-weight: 600;
    margin: 0 16px 0 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(10px);
}

导航栏布局

.navbar 设置为固定在页面顶部，宽度为100%，高度为72px，并应用了线性渐变的背景。
display: flex 使得内部元素可以水平排列，并居中对齐。

:is(.navbar, .burger, .dropdowns) {
    position: fixed;
    top: 0;
}

.navbar {
    width: 100%;
    height: 72px;
    color: #ffffff;
    z-index: 1;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: linear-gradient(to right, #262626, #1d1d1d);
}

移动端汉堡菜单

.burger 定义了一个汉堡菜单按钮，默认背景为 menu.svg 图标。点击按钮后，页面 body 添加 open 类名，背景图标切换为 close.svg，以指示导航栏的开/关状态。

.burger {
    width: 72px;
    height: 72px;
    z-index: 3;
    right: 0;
    display: grid;
    place-items: center;
    background-image: url("menu.svg");
    background-repeat: no-repeat;
    background-position: center;
}

body.open .burger {
    background-image: url("close.svg");
}

下拉菜单布局

.dropdowns 容器默认被隐藏，并通过 transition 设置了淡入淡出的动画效果。当 body 的 open 类名被添加时，菜单会滑动进屏幕并显示。

.dropdowns {
    z-index: 2;
    top: 84px;
    left: -9999px;
    right: 10px;
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.3s;
}

移动端响应式布局

通过媒体查询 @media (width < 500px)，为屏幕宽度小于500px的设备定义了不同的样式。菜单按钮被显示，导航选项垂直排列，并通过点击按钮展开或收起下拉菜单。

@media (width < 500px) {
    body.open .dropdowns {
        left: 10px;
        opacity: 1;
        visibility: visible;
        translate: 0;
    }

    body.open .dropdowns::before {
        inset: 0;
    }

    body.open img {
        display: block;
    }

    .dropdown-menu > button {
        min-height: 40px;
    }

    .dropdown > button:is(:focus, :hover) {
        opacity: 0.7;
    }

    .dropdown > button:focus > img {
        rotate: -180deg;
    }

    .dropdown > button:focus ~ .dropdown-menu {
        height: 120px;
    }

    .dropdown > button > img {
        margin-left: auto;
    }
}

完整代码

HTML 代码

<!DOCTYPE html>
<html lang="en">
  <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 href="./styles.css" rel="stylesheet" />
  </head>
  <body>
    <nav class="navbar">
      <button
        onclick="document.body.classList.toggle('open')"
        class="burger"
      ></button>
      <h1>那</h1>
      <div class="dropdowns">
        <div class="dropdown">
          <button>
            服务
            <img src="chevron.svg" />
          </button>
          <div class="dropdown-menu">
            <button>Web应用程序</button>
            <button>python程序</button>
            <button>前端页面开发</button>
          </div>
        </div>
        <div class="dropdown">
          <button>
            产品
            <img src="chevron.svg" />
          </button>
          <div class="dropdown-menu">
            <button>学习CSS电子书</button>
            <button>安全课程</button>
            <button>保姆级教程</button>
          </div>
        </div>
        <div class="dropdown">
          <button>
            支持
            <img src="chevron.svg" />
          </button>
          <div class="dropdown-menu">
            <button>在线聊天</button>
            <button>发送邮箱</button>
            <button>在线帮助</button>
          </div>
        </div>
      </div>
    </nav>
  </body>
</html>

CSS 代码

body {
  background: #141417;
}

button {
  font-size: 20px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

h1 {
  width: 38px;
  height: 38px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 16px 0 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(10px);
}

:is(.navbar, .burger, .dropdowns) {
  position: fixed;
  top: 0;
}

.navbar {
  width: 100%;
  height: 72px;
  color: #ffffff;
  z-index: 1;
  left: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: linear-gradient(to right, #262626, #1d1d1d);
}

.burger {
  width: 72px;
  height: 72px;
  z-index: 3;
  right: 0;
  display: grid;
  place-items: center;
  background-image: url("menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .burger {
  background-image: url("close.svg");
}

img {
  display: none;
  transition: rotate 0.3s;
}

.dropdowns {
  z-index: 2;
  top: 84px;
  left: -9999px;
  right: 10px;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
}

.dropdown {
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.dropdown > button {
  font-size: 16px;
  height: 40px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  opacity: 0.4;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.dropdown-menu {
  width: 100%;
  height: 0;
  display: grid;
  overflow: hidden;
  transition: height 0.6s;
}

.dropdown-menu > button {
  color: #f9f9f9;
  padding: 0 24px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}

.dropdown-menu > button:hover {
  opacity: 1;
}

.dropdowns::before {
  content: "";
  position: absolute;
  left: -9999px;
  background: #202024;
  border-radius: 6px;
}

@media (width < 500px) {
  body.open .dropdowns {
    left: 10px;
    opacity: 1;
    visibility: visible;
    translate: 0;
  }

  body.open .dropdowns::before {
    inset: 0;
  }

  body.open img {
    display: block;
  }

  .dropdown-menu > button {
    min-height: 40px;
  }

  .dropdown > button:is(:focus, :hover) {
    opacity: 0.7;
  }

  .dropdown > button:focus > img {
    rotate: -180deg;
  }

  .dropdown > button:focus ~ .dropdown-menu {
    height: 120px;
  }

  .dropdown > button > img {
    margin-left: auto;
  }
}

@media (width >= 500px) {
  button {
    font-size: 16px;
  }

  .burger {
    display: none;
  }

  .dropdowns {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }

  .dropdowns::before {
    display: none;
  }

  .dropdowns {
    width: auto;
    translate: 0;
  }

  .dropdown {
    height: 72px;
    flex-direction: row;
    align-items: center;
  }

  .dropdown > button {
    height: 72px;
    padding: 0 8px;
    opacity: 0.6;
  }

  .dropdown > button > img {
    display: block;
  }

  .dropdown:hover > button {
    opacity: 1;
  }

  .dropdown-menu {
    width: auto;
    height: 120px;
    position: absolute;
    top: 84px;
    padding: 6px 24px 10px;

    overflow: visible;
    opacity: 0;
    visibility: hidden;
    background: #232323;
    border-radius: 6px;
    place-items: start;
    translate: 0 24px;
    transition: 0.3s;
  }

  .dropdown-menu > button {
    height: 40px;
    padding: 0;
    margin: 0;
    opacity: 0.6;
  }
}

如果代码对你有帮助，请留下关注和点赞👍🏻吧

文章推荐

响应式导航栏不会做？看我一分钟学会制作导航栏！

响应式布局完全指南：小白必看，快速掌握网页适配技巧！

小那同学

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必学！使用CSS轻松实现响应式导航栏！

概述在现代Web开发中，响应式设计是实现优质用户体验的关键。响应式导航栏不仅能够适应不同设备的屏幕尺寸，还能在移动设备和桌面设备上提供一致的交互体验。本文将通过一个具体的示例，讲解如何使用HTML和CSS实现一个响应式的导航栏。HTML结构解析首先，我们定义了导航栏的基本HTML结构：导航栏nav导航栏由一个burger按钮：用于在移动设备上展开或收起导航栏。标题：用于显示网站的标志或标题。dropdowns：一个包含多个下拉菜单的容器，每个下拉菜单对应不同的导航选项。
复制链接

扫一扫