響應式導航如何實現 - W3Schools視訊04

JavaScript · 發表 2019-03-16 00:45:19

摘要：響應式導航即是讓導航變成響應式。常見的做法是在小螢幕時不將全部導航專案列出，而是顯示一個導航圖示，點選該圖示時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。 W3Schools 響應式導航教學響應式導航例子視訊...

響應式導航即是讓導航變成響應式。常見的做法是在小螢幕時不將全部導航專案列出，而是顯示一個導航圖示，點選該圖示時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。

視訊連結

B站
YouTube

響應式導航（Responsive Navigation)

實現響應式導航的重點在於：

responsive

以下是響應式導航的HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<i class="fa fa-bars"></i>
</a>
</div>

<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>

</body>
</html>

首先，在 <head> 的部分用 <link> 載入了一個 Font Awesome 外部連結，為的是使用其中的導航圖示。這一做法會載入Font Awesome的全部圖示，而你真正用到的只有一個。如果你這樣做，也可以利用 Fontello 選擇你會用到圖示，生成自己的圖示web font，再載入到你的網頁中。

可以看到 topnav 中的最後一條連結便是導航圖示。這裡使用 javascript:void(0); 讓連結的跳轉功能無效。再給了一個 icon 類以及設定了 onclick 事件函式為 toggleNav 。

再來看CSS的部分：

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #4CAF50;
color: white;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}

.topnav a.icon {
float: right;
display: block;
}

.topnav.responsive {
position: relative;
}

.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

重點有二：先是 .topnav .icon 設為了不顯示 display: none; ；接著是媒體請求，我們來詳細看看。

第一組將除了第一個（首頁）之外的導航專案全部隱藏。第二組是顯示導航圖示並讓其靠右。

接下來的三組都是 responsive 的設定。主要是將圖示固定於右側，再來是顯示導航專案，並讓其佔滿整行。

最後來看JavaScript：

function toggleNav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

當點選圖示時，取得 myTopnav 元素，並判斷它的 className 是否只有 topnav ，若是則為它加入 responsive （注意有一空格在前），否則，將它重設為 topnav 。加入 responsive 類則是顯示全部導航專案，也就是媒體請求最後三組的設定；沒有 responsive 便是隻顯示首頁的導航圖示。

這是最常見的響應式導航的實現方法，其他方法或大同小異，或增加細節與功能。若想要瞭解更多，以下兩種導航是我覺得值得一看的：

側邊欄滑入導航：改變 width ， 0 為隱藏，滑入效果則是由 transition 實現。
全屏導航：改變 width 和 height ；改動 width 是側邊滑入；改動 height 則是上下滑入。同樣 0 為隱藏，滑入效果由 transition 實現。

W3Schools系列的程式碼都在GitHub上： W3Schools GitHub

W3Schools教學系列

W3Schools 是知名的網頁設計／前端開發教學網站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明檔案（Documents）。有經驗的前端或多或少已經接觸過這個網站，因為它經常出現在搜尋結果的前幾項。其中，它的 How To 部分更是包含了大量非常實用的例子，例如，如何製作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

W3Schools系列全部視訊：

響應式導航如何實現 - W3Schools視訊04

視訊連結

響應式導航（Responsive Navigation)

W3Schools教學系列

您可能也會喜歡…