5自適應是現(xiàn)在主流的技術，導航欄菜單是最常見的一種，今天我們一起來學習一下它是如何使用HTML，CSS和JavaScript來構建響應式導航欄和漢堡菜單的。

這就是它的樣子，是不是很熟悉呢？

好的，那就先從HTML開始：

<header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>

通過這些代碼，我們實現(xiàn)了：

• 給header標簽指定名為header的CSS類的，可以作為導航菜單的容器。
• 給nav標簽指定名為navbar的CSS類。
• 具有nav-logo類的鏈接
• 具有nav-menu類的ul
• 在ul內部，我們有4個具有nav-item類的li
• 在每個nav-item中，都有一個包含nav-link類的鏈接
• 至于漢堡菜單，我已在代碼中添加了一個具有hamburger類的div，且此div中有3個帶bar類的span

以上就是我們需要的HTML代碼。

現(xiàn)在讓我們添加CSS樣式重置代碼

（此外，我們將導入所需的字體，并添加一些基本的CSS來重置所有的默認樣式。）

@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

現(xiàn)在讓我們給每個元素逐個添加樣式：

header和navbar：

.header{
border-bottom: 1px solid #E2E8F0;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}

hamburger樣式：

.hamburger {
display: none;
}

.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}

其他元素的基本樣式：

.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-item {
margin-left: 5rem;
}

.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}

.nav-link:hover{
color: #482ff7;
}

.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}

完成這些之后，看起來應該是這樣的：

但是它不是響應式的，所以我們還需要添加媒體查詢css代碼。

@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}

.nav-menu.active {
left: 0;
}

.nav-item {
margin: 2.5rem 0;
}

.hamburger {
display: block;
cursor: pointer;
}

}

這里媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。

此外，我們將hamburger設置為display: block;，所以現(xiàn)在可見。

我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設置left: 0;。現(xiàn)在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。

添加JavaScript

const hamburger=document.querySelector(“.hamburger”);
const navMenu=document.querySelector(“.nav-menu”);

hamburger.addEventListener(“click”, mobileMenu);

function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}

此處的函數mobileMenu()在hamburger和nav-menu上也添加了一個active類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創(chuàng)建X動畫。現(xiàn)在就開始做吧。

// Inside the Media Query.

.hamburger.active .bar:nth-child(2) {
opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

現(xiàn)在看起來應該是這樣的：

但是有一個問題，當我們單擊鏈接時，漢堡菜單不會關閉。現(xiàn)在讓我們解決一下這個問題。

const navLink=document.querySelectorAll(“.nav-link”);

navLink.forEach(n=> n.addEventListener(“click”, closeMenu));

function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}

closeMenu()函數從nav-menu和hamburger中刪除active類，從而關閉mobile menu。

H5導航菜單就是這樣，實現(xiàn)了用HTML，CSS和javascript構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。

更多干貨等著你~ 點贊、分享，關注哦

TML圖像標記

常用的圖像格式—GIF，PNG，JPG
圖像標記<img />
HTML網頁中任何元素的實現(xiàn)都要依靠HTML標記，要想在網頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記以及和他相關的屬性。其基本語法格式如下：

<img src="圖像URL" />

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。

相對路徑和絕對路徑

相對路徑
相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標圖像的位置。
例如：

<img src="img/logo.gif" alt="傳智播客-專業(yè)的java培訓,.net培訓,php培訓,網頁培訓,平面培訓,iOS培訓機構" />

相對路徑設置分為以下三種：

圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。

圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。

圖像文件位于html文件的上一級文件夾：在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="../logo.gif" />。

絕對路徑

絕對路徑一般是指帶有盤符的路徑。

例如：

“D:\HTML+CSS網頁制作\chapter02\img\logo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345