響應式設計已經成為了當今 Web 設計的一種必備的技能。隨著越來越多的人使用移動設備訪問網站，我們需要確保我們的網站在所有設備上都能夠正常地顯示。而其中一個關鍵組件就是導航欄。本文將介紹如何使用純 CSS 創建一個響應式導航。

/* HTML 代碼 *//* CSS 代碼 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.nav-links {
display: flex;
}
.nav-links li {
list-style: none;
margin-right: 20px;
}
.nav-links li a {
text-decoration: none;
color: #555;
}
.hamburger {
display: none;
}
.line {
width: 25px;
height: 3px;
background-color: #555;
margin: 5px;
}
@media(max-width: 768px) {
.nav-links {
display: none;
text-align: center;
width: 100%;
position: absolute;
top: 50px;
left: 0;
background-color: #f8f8f8;
}
.nav-links li {
margin-right: 0;
margin-bottom: 10px;
}
.nav-links li a {
color: #555;
}
.hamburger {
display: block;
cursor: pointer;
}
}
@media(min-width: 769px) {
.hamburger {
display: none;
}
}

首先，HTML 代碼包含一個nav元素，其中包含一個無序列表ul。列表項是鏈接，每個鏈接將指向網站的不同部分。此外，我們還包含一個與ul同級的 div 元素，表示我們的漢堡按鈕。

現在，我們使用 CSS 來實現所有的樣式。首先，我們使用flexbox實現我們的導航菜單。然后，當我們在窄屏設備上使用時，我們將 小屏幕上的菜單變成一個下拉式菜單，我們將使用媒體查詢來實現這個功能。

在屏幕寬度小于 768 像素時，我們使用absolute定位和text-align: center屬性將菜單轉換為下拉式菜單。此外，我們將背景顏色設置為白色，以更好地區分頁面內容和菜單。當漢堡按鈕被點擊時，我們使用 CSS 動畫來展示下拉式菜單。

在屏幕寬度大于等于 769 像素時，我們隱藏漢堡菜單，因為此時它不再需要了。

有了這些代碼，我們現在就可以創建一個簡單的響應式導航了。現在，你可以在移動設備和桌面瀏覽器上輕松地查看你的網站，而不必擔心導航欄上的問題。