如何做 - 帶圖示的導航欄
瞭解如何使用 CSS 建立帶有圖示的響應式導航選單。
帶圖示的導航欄
建立響應式帶圖示的導航欄
步驟 1) 新增 HTML
示例
<!-- 載入一個圖示庫 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> 主頁</a>
<a href="#"><i class="fa fa-fw fa-search"></i> 搜尋</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> 聯絡</a>
<a href="#"><i class="fa fa-fw fa-user"></i> 登入</a>
</div>
步驟 2) 新增 CSS
示例
/* 樣式化導航欄 */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* 導航欄連結 */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* 滑鼠懸停時的導航欄連結 */
.navbar a:hover {
background-color: #000;
}
/* 當前/活動導航欄連結 */
.active {
background-color: #04AA6D;
}
/* 新增響應式 - 在小於 500 畫素的螢幕上，導航欄將自動垂直顯示而不是水平顯示 */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
自己動手試一試 »
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
提示： 如果您想建立一個僅包含圖示的導航欄，請閱讀我們的 如何做 - 圖示欄教程。
