CSS伸縮導航菜單是在頁面中常見的導航菜單樣式之一。它通常包含一個頂部或側邊的菜單欄，可以隨著瀏覽器窗口大小的變化而自適應調整。下面我們將介紹如何使用CSS實現一個簡單的伸縮導航菜單。 首先，我們需要一個HTML文件來定義我們的菜單欄。這個菜單欄可以是一個列表，每個列表項對應一個導航鏈接。以下是一個基本的HTML結構：

<nav class="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>

接下來，我們需要使用CSS來定義樣式并使菜單欄伸縮。我們可以使用@media規則來根據瀏覽器窗口大小設置不同的樣式。以下是一個基本樣式：

.menu {
background-color: #333;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.menu li {
flex: 1;
}
.menu a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 768px) {
.menu ul {
flex-direction: column;
}
.menu li {
flex: 0 0 auto;
}
}

在上面的代碼中，我們先設置菜單欄的背景顏色為黑色。菜單項使用flex布局，并且默認情況下每個菜單項都占據相同的空間。每個菜單鏈接是一個塊元素，并具有10像素的上下內邊距和20像素的左右內邊距，以及白色文本顏色和無下劃線的文本裝飾。 然后，我們使用@media規則來定義窄屏幕設備上的樣式。在這里，我們重新定義了菜單列表的方向為垂直，并且每個菜單項都被設置為自動寬度，以適應不同的文本長度。 最后，當頁面大小改變時，菜單項將自動伸縮以適應不同的大小。 總的來說，CSS伸縮導航菜單是一個非常靈活和適應性強的導航菜單樣式。它可以在不同的設備和窗口大小上提供良好的用戶體驗。學習如何創建它可以幫助您更好地設計和創建響應式Web頁面。