5自適應(yīng)是現(xiàn)在主流的技術(shù)，導(dǎo)航欄菜單是最常見的一種，今天我們一起來學(xué)習(xí)一下它是如何使用HTML，CSS和JavaScript來構(gòu)建響應(yīng)式導(dǎo)航欄和漢堡菜單的。

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

好的，那就先從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>

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

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

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

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

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

@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)在讓我們給每個(gè)元素逐個(gè)添加樣式：

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

完成這些之后，看起來應(yīng)該是這樣的：

但是它不是響應(yīng)式的，所以我們還需要添加媒體查詢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;
}

}

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

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

我們還添加了一個(gè)額外的類.nav-menu.active，它在nav-menu上設(shè)置left: 0;。現(xiàn)在，到了添加javascript的時(shí)候了，以便在我們單擊漢堡菜單時(shí)，會(huì)在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”);
}

此處的函數(shù)mobileMenu()在hamburger和nav-menu上也添加了一個(gè)active類，從而打開mobile menu。單擊hamburger時(shí)，我們可以使用hamburger上的active類來創(chuàng)建X動(dòng)畫。現(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)在看起來應(yīng)該是這樣的：

但是有一個(gè)問題，當(dāng)我們單擊鏈接時(shí)，漢堡菜單不會(huì)關(guān)閉。現(xiàn)在讓我們解決一下這個(gè)問題。

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

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

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

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

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

更多干貨等著你~ 點(diǎn)贊、分享，關(guān)注哦

　移動(dòng)端頂部欄設(shè)計(jì)看似簡(jiǎn)單，其實(shí)在做界面時(shí)還是有許多細(xì)節(jié)值得我們注意的。今天我就針對(duì)UI設(shè)計(jì)中頂部欄的設(shè)計(jì)要點(diǎn)進(jìn)行簡(jiǎn)單的說明，希望能更好地幫助大家理解這個(gè)組件。

　　一、移動(dòng)端頂部欄樣式及設(shè)計(jì)要點(diǎn)

　　這里將移動(dòng)端頂部欄分為三種樣式，下面我們來分析以下：

　　1、常規(guī)頂部欄 2、Tab/分段控件頂部欄 3、大標(biāo)題頂部欄

　　1.常規(guī)頂部欄

　　常規(guī)頂部欄固定在狀態(tài)欄下， 主要由操作圖標(biāo)、標(biāo)題、搜索框等組成，大致分成以下4種：

　　a. 簡(jiǎn)單標(biāo)題頂部欄

　　主要由操作圖標(biāo)與標(biāo)題組成，如下圖：

　　該類型的頂部欄標(biāo)題大小一般是36px，操作圖標(biāo)的設(shè)計(jì)尺寸一般是40px左右，切圖尺寸一般是48px，背景色多采用白色或APP主題色。

　　b.搜索框頂部欄

　　是在簡(jiǎn)單標(biāo)題頂部欄的基礎(chǔ)上，去除標(biāo)題文字增加一個(gè)搜索框。如下圖：

　　搜索框的寬度由頂部欄中操作圖標(biāo)的多少?zèng)Q定，搜索框高度多采用56~60px，搜索框里的圖標(biāo)設(shè)計(jì)尺寸多采用40px左右(為了減少切圖尺寸，同樣可采用48px的切圖尺寸)。在擺放圖標(biāo)時(shí)，距離搜索框的間距與邊距相等看起來會(huì)更舒適。如下圖所示：

　　c.去標(biāo)題化

　　一些產(chǎn)品中的一級(jí)界面刪除了頂部欄中的標(biāo)題。為什么刪除呢，因?yàn)闃?biāo)題的功能就是告訴用戶當(dāng)前界面的名稱，而用戶從底部欄的選中狀態(tài)也能知道自己當(dāng)前在哪個(gè)界面。這個(gè)功能跟底部欄菜單有些重疊，當(dāng)我們想在有限的空間中展示更多的功能和內(nèi)容時(shí)，刪除標(biāo)題是一個(gè)不錯(cuò)的方法。

　　d.可點(diǎn)擊下拉

　　閑魚和百度翻譯界面中頂部欄可點(diǎn)擊操作，一款產(chǎn)品隨著不斷迭代功能會(huì)越來越多，空間越來越緊張。在這個(gè)前提下，將裝飾性元素轉(zhuǎn)變成功能性元素是一個(gè)不錯(cuò)的方法。

　　2.Tab/分段控件導(dǎo)航欄

　　Tab導(dǎo)航欄的可選項(xiàng)一般可以左右滑動(dòng)切換，UI設(shè)計(jì)中頂部欄的設(shè)計(jì)要點(diǎn)https://www.aaa-cg.com.cn/ui/2565.html?gpf選中樣式也比較豐富，常見的有底部加上小短線、字體顏色變化、字號(hào)放大等(組合使用效果更突出)，分段控件頂部導(dǎo)航欄一般有2~5個(gè)可選項(xiàng)，不能左右滑動(dòng)。如下圖：

　　3.大標(biāo)題導(dǎo)航欄

　　自ios11發(fā)布后，大標(biāo)題風(fēng)格的導(dǎo)航欄便開始流行起來，普通的頂部欄在二倍圖下高度只有88px，標(biāo)題字號(hào)一般為36px，而大標(biāo)題頂部欄高度足足有192px,標(biāo)題字號(hào)為68px。如下圖：

　　使用大標(biāo)題頂部欄，你需要考慮以下兩點(diǎn)：1.是否需要幫助用戶快速確認(rèn)所處位置(多為產(chǎn)品頁面重復(fù)性多，或是功能單一的APP，以瀏覽頁面信息為主);2.APP整體風(fēng)格是否偏向簡(jiǎn)約大氣。 適合使用大標(biāo)題頂部欄的產(chǎn)品:1.藝術(shù)相關(guān)或閱讀類APP，這類產(chǎn)品本身自帶藝術(shù)感或文藝氣息，當(dāng)大標(biāo)題結(jié)合特殊字體，或雜志風(fēng)版式，就能瞬間提高產(chǎn)品調(diào)性。2.現(xiàn)代簡(jiǎn)約型APP，通過大標(biāo)題+留白表現(xiàn)現(xiàn)代感。

　　二、背景色

　　1白色使用白色頂部欄讓用戶的注意力聚焦于內(nèi)容本身，幫助用戶更快的挑選出自己感興趣的內(nèi)容。

　　2品牌色用品牌色做背景的一大好處就是對(duì)頂部欄進(jìn)行了品牌化處理，用戶一看到就知道這是什么產(chǎn)品。

　　3透明透明背景常用在電商、旅游等需要烘托氛圍的界面中，有些也會(huì)放在頂部通欄Banner上，節(jié)省空間的同時(shí)減少割裂感，在視覺上看起來更為統(tǒng)一。

　　好了，以上就是今天分享的內(nèi)容， 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)留言給我，我會(huì)給大家解答。

UI設(shè)計(jì)中間距的重要性

航條效果圖：

我們先來看一下，首先這個(gè)整體我們可以看成一個(gè)大盒子，盒子的背景顏色為白色。

然后看一下整體的話是占到整個(gè)導(dǎo)航條的80%左右，上圖紅色框圈出的范圍。

這個(gè)盒子又分為兩個(gè)部分，左側(cè)的logo部分，右側(cè)的導(dǎo)航部分。

整個(gè)布局用到的是flex布局：

大家可以去看一下阮一峰老師的教程：

阮一峰flex布局

左側(cè)logo部分我們用到的標(biāo)簽有：

1、h3標(biāo)簽：

<h3><a href="index.html">多多魚網(wǎng)頁</a></h3>

h3是一對(duì)有開始有閉合的標(biāo)簽組合。以<h3>開始，以</h3>結(jié)束。

html h3標(biāo)簽主要用于布局標(biāo)題、欄目類內(nèi)容，h3與h1最大標(biāo)題標(biāo)簽相比，h1標(biāo)簽一般一個(gè)網(wǎng)頁中使用一次，而h3標(biāo)簽可以在一個(gè)網(wǎng)頁中多次使用。默認(rèn)CSS h3又比h2文字大小小一點(diǎn)。

html h3標(biāo)簽常見應(yīng)用地方：

欄目標(biāo)題可以使用h3標(biāo)簽
文章標(biāo)題可以使用h3標(biāo)簽
文章標(biāo)題列表可以使用h3標(biāo)簽（一般圖文列表中，圖片使用img引入，文章標(biāo)題文字使用h3標(biāo)簽）

2、a標(biāo)簽：

<a href="index.html">多多魚網(wǎng)頁</a>

<a> 標(biāo)簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標(biāo)。

在所有瀏覽器中，鏈接的默認(rèn)外觀是：

未被訪問的鏈接帶有下劃線而且是藍(lán)色的

已被訪問的鏈接帶有下劃線而且是紫色的

活動(dòng)鏈接帶有下劃線而且是紅色的

右側(cè)的導(dǎo)航部分我們用到的標(biāo)簽有：

一、無序列表簡(jiǎn)介

無序列表，很好理解，有序列表的列表項(xiàng)是有一定順序的，而無序列表的列表項(xiàng)是沒有順序的。默認(rèn)情況下，無序列表的項(xiàng)目符號(hào)是●，不過可以通過無序列表type屬性來改變無序列表的列表項(xiàng)符號(hào)。

語法：

<ul>
    <li>無序列表項(xiàng)</li>
    <li>無序列表項(xiàng)</li>
    <li>無序列表項(xiàng)</li>
</ul>

說明：

<ul>，即“unordered list（無序列表）”。<li>，即“l(fā)ist（列表項(xiàng)）”。理解標(biāo)簽語義更有利于你記憶，而記憶HTML標(biāo)簽的語義是HTML的基礎(chǔ)。

在該語法中，使用<ul></ul>標(biāo)簽表示一個(gè)無序列表的開始和結(jié)束，<li>表示這是一個(gè)列表項(xiàng)。在一個(gè)無序列表中可以包含多個(gè)列表項(xiàng)。

注意，<ul>標(biāo)簽和<li>標(biāo)簽也是配合使用，沒有單獨(dú)使用，而且<ul>標(biāo)簽內(nèi)部不能存在任何其他標(biāo)簽，一般情況下只能存在<li>標(biāo)簽（對(duì)于初學(xué)者，我們忽略嵌套列表）。這個(gè)概念要非常清楚，在網(wǎng)站開發(fā)后期很容易犯錯(cuò)。（這個(gè)情況跟有序列表一樣）。

右側(cè)導(dǎo)航代碼：

<ul>
   <li class="active">
	<a href="index.html">首頁</a>
   </li>
   <li>
	<a href="">網(wǎng)頁模板</a>
   </li>
   <li>
	<a href="">學(xué)習(xí)資料</a>
   </li>
   <li>
	<a href="">常見問題</a>
   </li>
   <li>
	<a href="">網(wǎng)頁作業(yè)</a>
   </li>
   <li>
	<a href="">聯(lián)系我們</a>
   </li>
</ul>

視屏教程：