CSS3中的側(cè)邊欄折疊展開功能是現(xiàn)代網(wǎng)站設(shè)計(jì)的必備特效之一。使用CSS3可以輕松實(shí)現(xiàn)側(cè)邊欄的折疊和展開，使頁(yè)面更加美觀和有趣。

/* CSS3側(cè)邊欄折疊展開代碼 */
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.sidebar {
width: 250px;
background-color: #f0f0f0;
padding: 20px;
transition: all 0.3s ease;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li {
padding: 5px;
}
.main-content {
flex-grow: 1;
padding: 20px;
transition: all 0.3s ease;
}
.collapse {
width: 50px !important;
}
.expand {
width: 250px !important;
}

上面的代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的側(cè)邊欄折疊展開功能。我們首先設(shè)置了頁(yè)面的基礎(chǔ)樣式，并使用flex布局來排列頁(yè)面元素。側(cè)邊欄使用了250px的寬度，并設(shè)置了背景顏色和內(nèi)邊距。

側(cè)邊欄使用了ul和li標(biāo)簽來創(chuàng)建一個(gè)簡(jiǎn)單的菜單。在菜單項(xiàng)上添加了一些內(nèi)邊距，使菜單看起來更好看。在側(cè)邊欄上使用了transition屬性，使側(cè)邊欄的折疊和展開更加平滑。

在CSS3中，我們可以使用偽類:hover來設(shè)置鼠標(biāo)懸停時(shí)的樣式效果。在這個(gè)例子中，我們使用鼠標(biāo)懸停時(shí)切換側(cè)邊欄的寬度，實(shí)現(xiàn)了側(cè)邊欄的折疊和展開功能。

這是一個(gè)比較簡(jiǎn)單的例子，實(shí)際上側(cè)邊欄的功能和樣式可以根據(jù)需求進(jìn)行定制，例如可以添加過渡動(dòng)畫效果、改變背景顏色等等。在網(wǎng)站中使用CSS3側(cè)邊欄折疊展開功能可以為用戶提供更好的用戶體驗(yàn)，帶來更加舒適和愉悅的使用體驗(yàn)。