CSS左側收縮導航菜單是一個非常實用的UI設計功能，它可以在頁面上為用戶提供快速導航，同時也能讓頁面更加優美、簡潔。
下面是一個簡單的示例，你可以通過修改CSS代碼來實現自己的左側導航菜單。
<html>
<head>
<style>
/* 定義導航菜單的樣式 */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #3b3b3b;
color: #fff;
transition: all 0.3s;
z-index: 999;
}
.sidebar:hover {
width: 300px;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 50px 0 0 0;
}
.sidebar li {
margin: 10px 0;
padding: 10px 20px;
background-color: #4e4e4e;
cursor: pointer;
transition: all 0.3s;
}
.sidebar li:hover {
background-color: #5e5e5e;
}
.sidebar li.active {
background-color: #222;
}
/* 定義頁面主體區域的樣式 */
.main {
margin-left: 200px;
padding: 20px;
transition: all 0.3s;
}
.sidebar:hover ~ .main {
margin-left: 300px;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li class="active">首頁</li>
<li>產品</li>
<li>服務</li>
<li>關于我們</li>
<li>聯系我們</li>
</ul>
</div>
<div class="main">
<p>這里是頁面主體區域，你可以在這里放置你的內容。</p>
</div>
</body>
</html>在上面的代碼中，我們定義了一個名為“sidebar”的div元素，它作為左側的導航菜單，包含了一個無序列表。還定義了一個名為“main”的div元素，它是頁面主體區域。
通過CSS中的transition屬性，我們可以讓導航菜單的寬度在鼠標懸停時產生平滑的變化。同時，我們還可以通過margin-left屬性來使主體區域也產生相應的變化，從而讓頁面整體看起來更加流暢自然。
如果你想要添加更多的內容，或是調整菜單的樣式，可以在CSS代碼的相應部分進行修改。CSS左側收縮導航菜單的實現并不難，你可以嘗試在自己的網站上添加這個實用的功能。
上一篇Css屬性的繼承屬性
下一篇css居中代碼塊