CSS設(shè)計(jì)折疊菜單是網(wǎng)頁(yè)開(kāi)發(fā)中的一項(xiàng)常見(jiàn)任務(wù)，它可以使頁(yè)面上的元素更加緊湊、整潔。接下來(lái)我們將為大家介紹如何使用CSS來(lái)設(shè)計(jì)折疊菜單。

/*使用CSS設(shè)置折疊菜單*/
/*為菜單容器設(shè)置樣式*/
.menu-container {
width: 100%;
background-color: white;
border: 1px solid gray;
padding-left: 10px;
padding-right: 10px;
}
/*設(shè)置菜單項(xiàng)樣式*/
.menu-item {
cursor: pointer;
padding: 5px;
}
/*默認(rèn)情況下菜單項(xiàng)是展開(kāi)的*/
.sub-menu {
display: block;
padding-left: 10px;
border-left: 1px solid gray;
}
/*點(diǎn)擊菜單項(xiàng)時(shí)折疊/展開(kāi)子菜單*/
.menu-item.active .sub-menu {
display: none;
}

以上是一個(gè)基本的CSS樣式，我們需要在HTML代碼中加入一些標(biāo)記來(lái)使折疊菜單起作用。

<!--HTML代碼-->
<div class="menu-container">
<div class="menu-item active">
菜單項(xiàng)1
<div class="sub-menu">
子菜單1
</div>
</div>
<div class="menu-item active">
菜單項(xiàng)2
<div class="sub-menu">
子菜單2
</div>
</div>
<div class="menu-item active">
菜單項(xiàng)3
<div class="sub-menu">
子菜單3
</div>
</div>
</div>

通過(guò)上面的HTML代碼，我們可以看到每個(gè)菜單項(xiàng)都有一個(gè)子菜單，而這些子菜單默認(rèn)情況下是展開(kāi)的。當(dāng)我們點(diǎn)擊菜單項(xiàng)時(shí)，該菜單項(xiàng)就會(huì)變?yōu)椴换钴S狀態(tài)，子菜單也就會(huì)被折疊起來(lái)。當(dāng)然，如果我們?cè)俅吸c(diǎn)擊該菜單項(xiàng)，子菜單就會(huì)展開(kāi)。

總之，折疊菜單是一個(gè)非常實(shí)用的功能。它可以幫助我們更好地組織頁(yè)面內(nèi)容，為用戶提供更好的使用體驗(yàn)。希望以上介紹對(duì)大家有所幫助，謝謝！