用HTML、CSS 和 JS 構(gòu)建一個響應(yīng)式導(dǎo)航欄菜單-教程

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

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

H5導(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>

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

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

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

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

（此外，我們將導(dǎo)入所需的字體，并添加一些基本的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;
}

完成這些之后，看起來應(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)在可見。

我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設(shè)置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”);
}

此處的函數(shù)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)在看起來應(yīng)該是這樣的：

但是有一個問題，當我們單擊鏈接時，漢堡菜單不會關(guā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()函數(shù)從nav-menu和hamburger中刪除active類，從而關(guān)閉mobile menu。

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

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

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

　　一、移動端頂部欄樣式及設(shè)計要點

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

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

　　1.常規(guī)頂部欄

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

　　a. 簡單標題頂部欄

　　主要由操作圖標與標題組成，如下圖：

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

　　b.搜索框頂部欄

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

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

　　c.去標題化

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

　　d.可點擊下拉

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

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

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

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

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

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

　　二、背景色

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

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

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

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

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

航條效果圖：

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

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

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

整個布局用到的是flex布局：

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

阮一峰flex布局

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

1、h3標簽：

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

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

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

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

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

2、a標簽：

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

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

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

在所有瀏覽器中，鏈接的默認外觀是：

未被訪問的鏈接帶有下劃線而且是藍色的

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

活動鏈接帶有下劃線而且是紅色的

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

一、無序列表簡介

無序列表，很好理解，有序列表的列表項是有一定順序的，而無序列表的列表項是沒有順序的。默認情況下，無序列表的項目符號是●，不過可以通過無序列表type屬性來改變無序列表的列表項符號。

語法：

<ul>
    <li>無序列表項</li>
    <li>無序列表項</li>
    <li>無序列表項</li>
</ul>

說明：

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

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

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

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

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

視屏教程：

在線咨詢

上一篇：30種CSS3動畫特效按鈕
下一篇：在Access中，如何輕松導(dǎo)入這些外部數(shù)據(jù)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

用HTML、CSS 和 JS 構(gòu)建一個響應(yīng)式導(dǎo)航欄菜單-教程

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

您的項目需求