CSS左側(cè)菜單折疊按鈕是一個(gè)常見的功能，它可以讓頁面更加美觀、整潔。下面，我們來看一下如何實(shí)現(xiàn)這個(gè)功能。

// HTML代碼
<div class="menu">
<button class="collapse-btn"><i class="fa fa-bars"></i></button>
<ul class="menu-list">
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
</ul>
</div>
// CSS代碼
.menu {
position: relative;
width: 200px;
height: 100%;
background-color: #eee;
}
.collapse-btn {
position: absolute;
top: 0;
right: -40px;
width: 40px;
height: 40px;
background-color: #ccc;
border: none;
}
.menu-list {
margin-top: 40px;
padding: 0;
list-style: none;
}
.menu-list li {
height: 40px;
line-height: 40px;
color: #333;
text-indent: 20px;
}
.collapsed .menu-list {
display: none;
}
.collapsed .collapse-btn {
right: 0;
}
.collapsed .fa-bars:before {
content: "\f0c9";
}

在HTML代碼中，我們先定義了一個(gè)名為menu的div，里面包含一個(gè)折疊按鈕和一個(gè)菜單列表。在CSS代碼中，我們先設(shè)置menu的樣式，包括寬度、高度、背景顏色。然后，我們定義了一個(gè)collapse-btn類，這個(gè)類用來設(shè)置折疊按鈕的樣式，包括位置、背景顏色。接著，我們設(shè)置了一個(gè)menu-list類，用來設(shè)置菜單列表的樣式，包括上邊距、內(nèi)邊距、列表樣式。最后，我們定義了一個(gè)collapsed類，這個(gè)類用來控制菜單折疊的樣式，達(dá)到折疊和展開的效果。

可以發(fā)現(xiàn)，在菜單折疊的時(shí)候，我們會將.menu-list和.collapse-btn的位置進(jìn)行調(diào)整。而在CSS中，我們使用了.collapsed這個(gè)類來控制樣式的變化。這個(gè)類將.menu-list和.collapse-btn的位置進(jìn)行了調(diào)整，并且將.fa-bars的樣式也進(jìn)行了修改，達(dá)到了菜單圖標(biāo)變化的效果。

綜上所述，CSS左側(cè)菜單折疊按鈕是一個(gè)非常實(shí)用的功能，它不僅可以美化頁面，還可以使頁面更加整潔，提高用戶體驗(yàn)。