如何 - 響應式頂部導航
瞭解如何使用 CSS 和 JavaScript 建立響應式頂部導航選單。
響應式導航欄
調整瀏覽器視窗大小，檢視響應式導航選單的工作原理
建立響應式頂部導航
步驟 1) 新增 HTML
示例
<!-- 載入圖示庫以在小螢幕上顯示漢堡選單 (條形) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<a href="#home" class="active">主頁</a>
<a href="#news">新聞</a>
<a href="#contact">聯絡</a>
<a href="#about">關於</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
帶有 class="icon" 的連結用於在小螢幕上開啟和關閉頂部導航。
步驟 2) 新增 CSS
示例
/* 為頂部導航新增黑色背景色 */
.topnav {
background-color: #333;
overflow: hidden;
}
/* 樣式導航欄中的連結 */
.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 類以突出顯示當前頁面 */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* 隱藏應在小螢幕上開啟和關閉頂部導航的連結 (.icon) */
.topnav .icon {
display: none;
}
新增媒體查詢
示例
/* 當螢幕寬度小於 600 畫素時，隱藏所有連結，除了第一個 ("主頁")。顯示包含應開啟和關閉頂部導航的連結 (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* 當用戶點選圖示時，使用 JavaScript 將 "responsive" 類新增到頂部導航。此類別使頂部導航在小螢幕上看起來更好 (垂直顯示連結而不是水平顯示) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
步驟 3) 新增 JavaScript
示例
/* 當用戶點選圖示時，在頂部導航中新增和移除 "responsive" 類之間切換 */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
自己動手試一試 »
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
