在網(wǎng)頁(yè)的設(shè)計(jì)中，導(dǎo)航欄是一個(gè)非常重要的組成部分。然而，在移動(dòng)設(shè)備上，網(wǎng)頁(yè)的布局往往較窄，導(dǎo)航欄的空間受到限制，因此需要使用折疊效果來(lái)展示導(dǎo)航欄中的多個(gè)選項(xiàng)。

使用CSS實(shí)現(xiàn)導(dǎo)航欄折疊并不難，我們只需要利用CSS的偽類選擇器和屬性選擇器來(lái)控制文本和圖標(biāo)的顯示與隱藏。下面是一個(gè)使用CSS實(shí)現(xiàn)導(dǎo)航欄折疊的示例代碼：

/* 設(shè)置導(dǎo)航欄圖標(biāo)樣式 */
.navbar-toggle-icon {
display: block;
height: 2px;
width: 20px;
background-color: #333;
margin-bottom: 5px;
position: relative;
transition: all 0.2s ease-in-out;
}
/* 設(shè)置導(dǎo)航欄折疊狀態(tài) */
.navbar-collapse {
display: none;
}
/* 設(shè)置導(dǎo)航欄折疊展開(kāi)狀態(tài) */
.navbar-collapse.show {
display: block;
}
/* 設(shè)置導(dǎo)航欄選項(xiàng)樣式 */
.nav-item {
display: block;
margin-bottom: 10px;
}
/* 設(shè)置導(dǎo)航欄選項(xiàng)在折疊狀態(tài)下的樣式 */
.dropdown-menu.show .nav-item {
margin-bottom: 0;
}
/* 切換導(dǎo)航欄折疊狀態(tài) */
.navbar-toggle:hover .navbar-toggle-icon {
background-color: #fff;
}
.navbar-toggle.collapsed .navbar-toggle-icon:nth-child(1) {
top: 0;
}
.navbar-toggle.collapsed .navbar-toggle-icon:nth-child(2) {
top: 50%;
}
.navbar-toggle.collapsed .navbar-toggle-icon:nth-child(3) {
top: 100%;
}
.navbar-toggle:not(.collapsed) .navbar-toggle-icon:nth-child(1) {
transform: rotate(45deg) translate(2px, 2px);
}
.navbar-toggle:not(.collapsed) .navbar-toggle-icon:nth-child(2) {
opacity: 0;
}
.navbar-toggle:not(.collapsed) .navbar-toggle-icon:nth-child(3) {
transform: rotate(-45deg) translate(1px, -2px);
}

上述代碼中，我們首先定義了導(dǎo)航欄圖標(biāo)的樣式，指定其高度、寬度、背景顏色等屬性。接著，我們?cè)O(shè)置了導(dǎo)航欄折疊狀態(tài)下的樣式，并利用JavaScript控制其顯示或隱藏。對(duì)于導(dǎo)航欄選項(xiàng)，我們也分別設(shè)置了在折疊和展開(kāi)狀態(tài)下的樣式。

總之，使用CSS實(shí)現(xiàn)導(dǎo)航欄折疊效果可以幫助我們更好地適配移動(dòng)設(shè)備，優(yōu)化用戶體驗(yàn)，同時(shí)也是一個(gè)非常基礎(chǔ)、實(shí)用的技巧。