CSS是一種用于網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言，可以實(shí)現(xiàn)一些美觀的效果與基本的布局。伸縮左側(cè)菜單是CSS中一種常見(jiàn)的實(shí)現(xiàn)方式，通過(guò)該功能可以在網(wǎng)頁(yè)布局中創(chuàng)建一個(gè)左側(cè)的導(dǎo)航菜單，并隨著窗口大小的變化而自適應(yīng)。

/* 伸縮左側(cè)菜單的CSS代碼 */
.sidebar {
position: fixed; /* 使菜單固定在頁(yè)面左側(cè) */
top: 0;
bottom: 0;
left: 0;
width: 250px; /* 菜單寬度 */
background-color: #f5f5f5; /* 菜單背景顏色 */
overflow-x: hidden; /* 隱藏橫向滾動(dòng)條 */
overflow-y: auto; /* 顯示縱向滾動(dòng)條 */
}
.content {
margin-left: 250px; /* 讓內(nèi)容區(qū)域距離左側(cè)菜單產(chǎn)生250px的間隔 */
}
@media screen and (max-width: 768px) {
.sidebar {
width: 100%; /* 在小屏幕上將菜單的寬度設(shè)置為100% */
z-index: 1; /* 保證在小屏幕上菜單能夠顯示在內(nèi)容上方 */
position: relative; /* 讓菜單根據(jù)內(nèi)容進(jìn)行自適應(yīng) */
}
.content {
margin-left: 0; /* 將內(nèi)容區(qū)域的間隔去掉 */
}
}

以上代碼中，我們定義了一個(gè)class為sidebar的容器來(lái)包含左側(cè)菜單，通過(guò)position屬性設(shè)置固定定位，好讓菜單保持在頁(yè)面左側(cè)。菜單的大小、顏色以及滾動(dòng)條的設(shè)置都在該容器中進(jìn)行。菜單和內(nèi)容區(qū)域之間的間隔是通過(guò)為內(nèi)容區(qū)域添加margin-left來(lái)實(shí)現(xiàn)。

在窗口寬度小于或等于768px時(shí)，我們通過(guò)@media查詢(xún)來(lái)控制菜單的大小和定位，實(shí)現(xiàn)自適應(yīng)。在小屏幕上，菜單的寬度設(shè)置為100%，以確保菜單能夠適應(yīng)得更好。Content內(nèi)的元素“margin-left：0”使內(nèi)容向左縮緊以避免與菜單重疊，并避免窗口變得太小。

通過(guò)CSS的伸縮左側(cè)菜單功能可以輕松實(shí)現(xiàn)網(wǎng)頁(yè)的基本布局，令網(wǎng)站更加美觀、實(shí)用。