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

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

可以發現，在菜單折疊的時候，我們會將.menu-list和.collapse-btn的位置進行調整。而在CSS中，我們使用了.collapsed這個類來控制樣式的變化。這個類將.menu-list和.collapse-btn的位置進行了調整，并且將.fa-bars的樣式也進行了修改，達到了菜單圖標變化的效果。

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