在網頁設計中，側邊欄經常被用作導航菜單或者顯示其他內容的地方。最近，有越來越多的人開始使用CSS實現側邊欄的伸縮。以下是幾種常見的CSS側邊欄伸縮方案。

/* 方案一：使用目標偽類 */
.sidebar {
width: 300px;
position: fixed;
top: 0;
left: -300px;
transition: left 0.3s ease-in-out;
}
.sidebar:target {
left: 0;
}
.content {
margin-left: 300px;
}
/* 方案二：使用復選框 */
.sidebar {
position: fixed;
top: 0;
left: -300px;
transition: left 0.3s ease-in-out;
}
#sidebar-toggle {
display: none;
}
#sidebar-toggle:checked + .sidebar {
left: 0;
}
.content {
margin-left: 300px;
}
/* 方案三：使用JavaScript */
.sidebar {
width: 300px;
position: fixed;
top: 0;
left: -300px;
transition: left 0.3s ease-in-out;
}
.slide-in {
left: 0 !important;
}
.content {
margin-left: 300px;
}
document.querySelector('.toggle-button').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('slide-in');
});

無論你選擇哪種方案，都要確保側邊欄的樣式和內容都是響應式的，以達到最佳的用戶體驗。此外，在使用方案二時，請務必將復選框隱藏，否則會破壞頁面的美觀。