CSS側欄展開是一種常用的網頁設計效果。通過點擊菜單按鈕或鏈接，頁面會彈出一個側欄，用于展示更多的內容或菜單選項。

要實現這個效果，需要使用CSS的一些基礎知識。

/* 設置側欄外框 */
.sidebar {
position: fixed;
top: 0;
left: -250px; /* 隱藏側欄 */
width: 250px;
height: 100%;
background-color: #f1f1f1;
transition: all 0.3s ease-in-out; /* 設置動畫效果 */
}
/* 設置菜單按鈕樣式 */
.menu-btn {
position: fixed;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 999; /* 層級置頂 */
}
/* 當側欄彈出時的樣式 */
.sidebar.show {
left: 0;
}
/* 當側欄彈出時菜單按鈕的樣式 */
.sidebar.show + .menu-btn {
left: 260px; /* 側欄展開后將菜單按鈕向右移動 */
}

通過設置側欄的left屬性，可以實現側欄的展開和關閉。同時，為了實現動畫效果，使用了CSS的transition屬性。

菜單按鈕的樣式可以自由調整，根據實際需求進行設計即可。同時，為了實現菜單按鈕和側欄的聯動效果，需要在CSS中使用同級相鄰選擇器。

通過以上的CSS代碼，就可以實現一個基本的CSS側欄展開效果。接下來可以根據具體需求進行調整和擴展。