CSS側邊欄導航及內容是一種非常典型的網頁布局。通過側邊欄，用戶可以快速瀏覽網站內容，并進行導航。下面我們就來看一下如何使用CSS實現這種效果。

/* CSS樣式 */
.sidebar {
width: 200px; /* 側邊欄寬度 */
height: 100%; /* 側邊欄高度 */
background-color: #f0f0f0; /* 側邊欄背景色 */
float: left; /* 左浮動 */
}
.content {
margin-left: 200px; /* 內容區左邊距等于側邊欄寬度 */
background-color: #fff; /* 內容區背景色 */
height: 100%; /* 內容區高度 */
}
.menu {
margin: 20px; /* 菜單整體邊距 */
padding: 0; /* 清空菜單內邊距 */
list-style: none; /* 清空菜單默認樣式 */
}
.menu li {
padding: 10px; /* 菜單項內邊距 */
margin-bottom: 5px; /* 菜單項下邊距 */
}
.menu li.active {
background-color: #ddd; /* 當前激活菜單項背景色 */
}

首先，在HTML中定義一個包含側邊欄和內容區的父容器，以上面的CSS樣式為例。

<div class="container">
<div class="sidebar">
<ul class="menu">
<li class="active">菜單項一</li>
<li>菜單項二</li>
<li>菜單項三</li>
</ul>
</div>
<div class="content">
<p>內容區域</p>
</div>
</div>

然后，在CSS中定義好各元素的樣式。其中，定義好側邊欄的寬度、高度和背景色；定義好內容區的邊距和背景色；定義好菜單的內外邊距、默認樣式和當前激活樣式。

最后，在HTML中使用ul和li標簽定義菜單項，在CSS中為菜單項定義樣式，并為當前激活的菜單項定義特殊樣式。

CSS側邊欄導航及內容的功能非常實用，使用CSS實現也非常簡單，可以給網站帶來良好的用戶體驗，具有很高的應用價值。