CSS - 導航列：網站導航的關卡

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 CSS 導航列的世界。作為你們親切友善的鄰居計算機老師，我將指導你們這個網頁設計中不可或缺的環節。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起進入吧！

CSS - Navbar

什麼是導航列？

在我們開始編碼之前，讓我們先了解什麼是導航列。想像你在一個巨大的圖書館裡。你如何找到你想要的書？你會使用指示牌和目錄，對吧？那麼，導航列對於網站來說就是如此。它是一組鏈接，能夠幫助用戶輕鬆地在你的網站中導航。

現在，讓我們看看不同類型的導航列以及如何使用 CSS 創建它們。

CSS 水平導航列

水平導航列可能是你在網站上最常見的類型。它就像頁面上方的按鈕行。

這裡有一個簡單的例子：

<ul class="navbar">
<li><a href="#home">首頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#contact">聯繫我們</a></li>
</ul>

這是讓它看起來漂亮的 CSS：

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #111;
}

讓我們分解一下：

我們使用 list-style-type: none; 移除列表的項目符號
我們將列表項目左浮動以使其水平排列
我們將鏈接樣式設置為按鈕
我們添加一個懸停效果以使其互動

CSS 垂直導航列

有時候，你可能希望你的導航列是垂直的，特別是在移動設備或側邊欄上。這是怎麼做到的：

<ul class="vertical-navbar">
<li><a href="#home">首頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯繫我們</a></li>
<li><a href="#about">關於我們</a></li>
</ul>

以及 CSS：

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

這裡的主要區別是我們不浮動列表項目。相反，我們為整個導航列設置一個寬度，讓列表項目自然堆疊。

CSS 下拉導航列

現在，讓我們添加一些花樣，加上下拉菜單！這對於組織子分類非常有用。

<ul class="navbar">
<li><a href="#home">首頁</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">產品</a>
<div class="dropdown-content">
<a href="#">筆記本電腦</a>
<a href="#">平板電腦</a>
<a href="#">智慧手機</a>
</div>
</li>
<li><a href="#contact">聯繫我們</a></li>
</ul>

以及 CSS：

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

這個 CSS 使用 :hover 伪类在用户悬停在“产品”链接上时显示下拉内容。

CSS 固定導航列

固定導航列即使在滾動時也會保持在原位。它就像一個總是在那裡等待你的個人導遊。

要使導航列固定，我們只需在 CSS 中添加一行：

.navbar {
/* ... 其他樣式 ... */
position: fixed;
top: 0;
width: 100%;
}

這樣導航列就會始終位於屏幕頂部。

CSS 粘性導航列

粘性導航列與固定導航列相似，但它只有在滾動過導航列後才會變為固定。它就像一個跟隨你的朋友，但只有在走過一段距離後才會這樣。

這樣做粘性導航列：

.navbar {
/* ... 其他樣式 ... */
position: sticky;
top: 0;
}

區別在於我們使用 position: sticky 而不是 position: fixed。

導航列的分隔線

有時候，你想要用線來分隔導航列的項目。這裡有一個簡單的技巧：

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

這會在每個項目之間添加一條線，除了最後一個。

固定垂直導航列

最後，讓我們將我們學到的知識結合起來創建一個固定的垂直導航列：

<ul class="fixed-vertical-navbar">
<li><a href="#home">首頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯繫我們</a></li>
<li><a href="#about">關於我們</a></li>
</ul>

以及 CSS：

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

這會創建一個在滾動時位於屏幕左側的垂直導航列。

結論

這就是全部，各位！我們涵蓋了各種導航列樣式，從水平到垂直，從下拉菜單到固定。記住，熟練來自練習，所以不要害怕嘗試這些樣式並創建有自己風格的導航列設計。

這裡是一個總結我們所涵蓋的導航列類型的表格：

導航列類型	鍵 CSS 屬性	主要特徵
水平	`float: left;`	項目水平對齊
垂直	`width: [value];`	項目垂直堆疊
下拉	`:hover`	在懸停時顯示附加選項
固定	`position: fixed;`	在滾動時保持在原地
粘性	`position: sticky;`	在滾動過後變為固定

記住，編程就像烹飪 - 你從基本的菜譜開始，但當你越來越熟悉時，你可以開始添加自己的風味。所以，繼續混合和匹配這些樣式，創造出令人愉悅的...我是說，視覺上吸引人的導航列！

祝編程愉快，願你的導航列總是引導你走向令人興奮的目的地！

Credits: Image by storyset