在網頁開發中，常常會使用左側收縮菜單進行頁面布局。使用HTML和CSS可以輕松地實現這一功能。下面我們來看一下如何編寫HTML左側收縮菜單的代碼。 首先，在HTML中，需要使用ul標簽和li標簽來創建菜單列表。ul表示無序列表，li表示列表的每一項。例如：

<ul>
<li>首頁</li>
<li>新聞動態</li>
<li>產品展示</li>
<li>聯系我們</li>
</ul>

以上代碼會創建一個包含四個菜單項的簡單菜單列表。 接下來，需要使用CSS來設置菜單的樣式。為了實現左側收縮菜單的效果，通常需要將菜單列表的寬度設置為固定值，在菜單的左側添加一個收縮按鈕并使用JavaScript來控制菜單的顯示和隱藏。 下面是一個簡單的CSS樣式和JavaScript代碼：

<style>
/* 菜單樣式 */
.menu {
width: 200px;
height: 100%;
background-color: #f4f4f4;
position: fixed;
left: 0;
top: 0;
}
/* 收縮按鈕樣式 */
.collapse-button {
width: 20px;
height: 20px;
background-color: #333;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 20px;
border-radius: 50%;
position: absolute;
top: 10px;
right: -10px;
cursor: pointer;
}
/* 隱藏菜單項 */
.menu ul {
display: none;
}
/* 顯示菜單項 */
.menu.active ul {
display: block;
}
</style>
<script>
/* 收縮按鈕點擊事件 */
document.querySelector('.collapse-button').addEventListener('click', function(evt) {
evt.preventDefault();
document.querySelector('.menu').classList.toggle('active');
});
</script>

以上代碼會設置菜單的樣式，并添加一個收縮按鈕。點擊按鈕時，通過JavaScript代碼添加或刪除一個active類來控制菜單的顯示和隱藏。 總結一下，HTML左側收縮菜單的實現可以使用ul和li標簽創建菜單列表，使用CSS設置菜單的樣式，通過JavaScript代碼控制菜單的顯示和隱藏。以上是一個簡單實現的例子，開發者可以根據實際需要進行修改和擴展。