在網頁的設計中，導航欄是一個非常重要的組成部分。然而，在移動設備上，網頁的布局往往較窄，導航欄的空間受到限制，因此需要使用折疊效果來展示導航欄中的多個選項。

使用CSS實現導航欄折疊并不難，我們只需要利用CSS的偽類選擇器和屬性選擇器來控制文本和圖標的顯示與隱藏。下面是一個使用CSS實現導航欄折疊的示例代碼：

/* 設置導航欄圖標樣式 */
.navbar-toggle-icon {
display: block;
height: 2px;
width: 20px;
background-color: #333;
margin-bottom: 5px;
position: relative;
transition: all 0.2s ease-in-out;
}
/* 設置導航欄折疊狀態 */
.navbar-collapse {
display: none;
}
/* 設置導航欄折疊展開狀態 */
.navbar-collapse.show {
display: block;
}
/* 設置導航欄選項樣式 */
.nav-item {
display: block;
margin-bottom: 10px;
}
/* 設置導航欄選項在折疊狀態下的樣式 */
.dropdown-menu.show .nav-item {
margin-bottom: 0;
}
/* 切換導航欄折疊狀態 */
.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);
}

上述代碼中，我們首先定義了導航欄圖標的樣式，指定其高度、寬度、背景顏色等屬性。接著，我們設置了導航欄折疊狀態下的樣式，并利用JavaScript控制其顯示或隱藏。對于導航欄選項，我們也分別設置了在折疊和展開狀態下的樣式。

總之，使用CSS實現導航欄折疊效果可以幫助我們更好地適配移動設備，優化用戶體驗，同時也是一個非常基礎、實用的技巧。