在網(wǎng)頁設計中，導航欄是非常重要的一部分。一種令人印象深刻的導航欄特效就是左側(cè)導航。左側(cè)導航可以讓網(wǎng)站更加美觀，提高用戶體驗。下面我們將介紹如何制作一個簡單卻炫酷的左側(cè)導航。

/*html部分*/
<div id="left-nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
/*css部分*/
#left-nav {
width: 150px;
position: fixed;
left: -150px;
top: 50%;
transform: translateY(-50%);
}
#left-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#left-nav li {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ddd;
transition: all 0.3s ease-out;
}
#left-nav li.active {
background-color: #ddd;
}
#left-nav li:hover {
background-color: #f5f5f5;
}
#left-nav li a {
display: block;
text-decoration: none;
padding-left: 20px;
color: #333;
}
#left-nav.active {
left: 0;
}

首先，我們在HTML文件中創(chuàng)建一個DIV元素來承載我們的左側(cè)導航，接著在這個DIV內(nèi)部創(chuàng)建一個無序列表。對于無序列表中的列表項，我們使用一個HTML鏈接將它們包起來。其中，我們設置一個active類來表示當前選中的項。然后，在CSS中，我們將導航欄整體的寬度設置為150像素，并將其向左移動150像素以便在屏幕外隱藏。我們將它定位在頁面的中央，并使用CSS3的transform屬性來使其垂直居中。接著，我們在CSS中為列表項設置了一些基礎樣式，包括高度、行高和邊框。我們使用CSS3的transition屬性和ease-out的緩和效果來平滑地過渡。當我們鼠標移到列表項上時，我們將背景色設置為淺灰色，當項被選中時，我們將背景色設置為深灰色。最后，在CSS中我們將一個active類綁定到導航欄div中，當該類被添加時，導航欄就會被展開到頁面的左側(cè)。