阅读建议: 跟着文章敲一下,不建议直接粘贴代码。
概述
在现代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;
}
}
如果代码对你有帮助,请留下关注和点赞👍🏻吧
文章推荐