HTML導航折疊代碼2級 在網頁設計中，導航菜單是一個非常重要的組成部分。然而，在小屏幕設備如手機上顯示導航菜單可能會有些困難，因為受限于屏幕大小，將所有的導航菜單項都顯示出來可能不現實，因此需要使用折疊功能。 折疊菜單通常使用JavaScript創建，但是我們也可以使用HTML和CSS來完成。下面是一個HTML導航菜單的折疊代碼示例：

<nav>
<button class="nav-toggle" id="nav-toggle-1">Menu</button>
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="nav-dropdown">
<a href="#" class="nav-dropdown-toggle">Services</a>
<ul class="nav-dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

在這個示例中，我們使用了一個按鈕和一個無序列表來創建導航菜單。當屏幕尺寸較小時，點擊按鈕可以展開或折疊整個菜單。如果導航菜單中有子菜單，我們使用一個類名“nav-dropdown”對父級菜單項進行標記，并為其加一個鏈接來控制子菜單的展開和折疊。 下面是折疊導航菜單的CSS代碼:

.nav-toggle {
display: none;
}
.nav-menu {
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
.nav-menu {
flex-direction: row;
}
.nav-dropdown:hover .nav-dropdown-menu {
display: block;
}
}
.nav-dropdown-menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-dropdown-toggle {
cursor: pointer;
}
.nav-dropdown-menu li {
background-color: #f1f1f1;
border: 1px solid #ddd;
margin-bottom: -1px;
}
.nav-dropdown-menu li a {
color: #333;
}

在這個示例中，我們使用了CSS來設置樣式，包括隱藏按鈕、垂直排列菜單項、扁平化無序列表、在大屏幕上水平排列菜單項以及標識子菜單項等。 總結 在響應式網頁設計中，折疊導航菜單是一個必不可少的組成部分。HTML和CSS提供了創建這些菜單的基本工具，讓我們可以輕松地創建完美的導航菜單，為我們的網站增添亮點。