如何用 HTML 和 CSS 實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄效果
作者：楊小愛(ài)
在今天的文章中，我們將一起來(lái)學(xué)習(xí)如何用 HTML 和 CSS 制作響應(yīng)式導(dǎo)航欄效果。
在今天的文章中，我們將一起來(lái)學(xué)習(xí)如何用 HTML 和 CSS 制作響應(yīng)式導(dǎo)航欄效果。
這篇文章主要是面向初學(xué)者的，如果你是有經(jīng)驗(yàn)的開(kāi)發(fā)者，請(qǐng)直接跳過(guò)或者忽略。
在這篇文章中，我們將一起來(lái)實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄效果，實(shí)現(xiàn)后，你可以在你的任何項(xiàng)目中使用它。
現(xiàn)在，我們就開(kāi)始吧。
01、添加基本的 HTML結(jié)構(gòu)
HTML 是一門(mén)超文本標(biāo)記語(yǔ)言。它的主要工作是給我們的項(xiàng)目創(chuàng)建友好的網(wǎng)頁(yè)結(jié)構(gòu)。我們將使用這種標(biāo)記語(yǔ)言來(lái)完成我們的項(xiàng)目結(jié)構(gòu)。
現(xiàn)在，讓我們一起來(lái)看看我們項(xiàng)目的 HTML 代碼結(jié)構(gòu)，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>如何用 HTML和CSS 實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<input type="checkbox" id="nav-toggle">
<div class="logo"><strong>web前端開(kāi)發(fā)</strong></div>
<ul class="links">
<li><a href="#home">網(wǎng)站主頁(yè)</a></li>
<li><a href="#about">關(guān)于我們</a></li>
<li><a href="#work">工作內(nèi)容</a></li>
<li><a href="#projects">開(kāi)發(fā)項(xiàng)目</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<div class="container">
<img src="01.jpg" alt="">
<img src="02.jpg" alt="">
</div>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</body>
</html>- 我們將從制作一個(gè)新的 HTML 文件開(kāi)始。為了在多種字體樣式之間切換，我們將在頭部部分添加指向外部 CSS 文件和 Google 字體的鏈接。
- 現(xiàn)在，利用 <nav> 標(biāo)簽，我們將構(gòu)建任何網(wǎng)頁(yè)的標(biāo)題或?qū)Ш綑凇?/li>
- 我們現(xiàn)在將在 nav 標(biāo)簽中添加一個(gè)帶有徽標(biāo)的 div 元素，我們將使用無(wú)序列表將不同的菜單項(xiàng)添加到我們的導(dǎo)航欄。
- 為了使用菜單項(xiàng)鏈接到不同的部分，我們將錨元素放在列表項(xiàng)中。
- 我們現(xiàn)在將使用 label 標(biāo)簽為我們的導(dǎo)航欄切換添加標(biāo)簽，稍后我們將使用它來(lái)使用 CSS 為我們的導(dǎo)航欄響應(yīng)。
- 為了幫助大家理解標(biāo)題的引用，我們?cè)谌萜髦蟹胖昧藘蓚€(gè)圖像。
現(xiàn)在，讓我們看看頁(yè)面的結(jié)構(gòu)輸出的效果：
02、為響應(yīng)式導(dǎo)航添加CSS代碼
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
margin-top: 100px;
}
.container img {
display: block;
width: 100%;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Montserrat", "sans-serif";
height: 100px;
background-color: #00a6bc;
padding: 0 5%;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
position: relative;
}
nav .links a:hover {
color: white;
}
nav .links a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
nav .links a:hover::before {
visibility: visible;
transform: scaleX(1);
color: white;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
transition: all 0.5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}添加完CSS后，我們將得到如下效果：
當(dāng)我們把瀏覽器的窗口逐漸縮小時(shí)，頁(yè)面上的導(dǎo)航菜單也會(huì)折疊起來(lái)：
點(diǎn)擊折疊漢堡菜單，我們就會(huì)看到導(dǎo)航欄其他內(nèi)容，效果如下：
03、解釋一下CSS代碼
第 1 步：我們將使用 body 標(biāo)簽將網(wǎng)頁(yè)上的邊距和填充設(shè)置為“0”。
我們將使用類選擇器 (.container) 來(lái)設(shè)計(jì)我們的圖像。我們?yōu)閳D像添加了“100px”的上邊距。我們的圖像寬度設(shè)置為 100%，其顯示設(shè)置為“block”。
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
margin-top: 100px;
}
.container img {
display: block;
width: 100%;
}第 2 步：我們現(xiàn)在將使用標(biāo)簽選擇器 (nav) 自定義導(dǎo)航欄。
為了讓它看起來(lái)更靠近窗口，我們將位置固定在網(wǎng)頁(yè)上，并將 z-index 增加到 10。選擇了“Montesirat”字體系列。高度設(shè)置為“100px”，背景色為“#00a6bc”。
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Montserrat", "sans-serif";
height: 100px;
background-color: #00a6bc;
padding: 0 5%;
}第 3 步：使用類選擇器，我們現(xiàn)在將設(shè)置我們的子元素 (.logo) 的樣式。
我們指定它應(yīng)該“浮動(dòng)到窗口的左側(cè)”。高度和寬度的定義分別為“100%”和“40%”。
文章居中對(duì)齊，字體顏色為“白色”。
我們?yōu)閷?dǎo)航欄中的鏈接添加了一些樣式。他們的位置被描述為“向右浮動(dòng)”。寬度和高度的定義分別為“60%”和“100%”。這些項(xiàng)目居中并且顯示設(shè)置為“flex”。
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}第4步：現(xiàn)在我們將樣式添加到我們的字體鏈接。
字體大小設(shè)置為 16px，文本裝飾為無(wú)，字體顏色為“白色”，我們添加了一些懸停屬性，當(dāng)用戶懸停時(shí)，白色底部邊框?qū)⒊霈F(xiàn)在鏈接下方。
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
position: relative;
}
nav .links a:hover {
color: white;
}
nav .links a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
nav .links a:hover::before {
visibility: visible;
transform: scaleX(1);
color: white;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all 0.5s ease-in-out;
}第 5 步：現(xiàn)在窗口的屏幕尺寸已經(jīng)減小到等于窗口的規(guī)定寬度。
我們將在 CSS 中添加一個(gè)響應(yīng)性和測(cè)試功能，以添加一個(gè)切換欄來(lái)顯示菜單項(xiàng)。
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
transition: all 0.5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}到這里，我們要實(shí)現(xiàn)的效果就算完成了，希望你也已經(jīng)學(xué)會(huì)了怎么使用 HTML 和 CSS 來(lái)實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄效果了。
責(zé)任編輯：華軒
來(lái)源：
web前端開(kāi)發(fā)
