在Web開發(fā)中，左側(cè)導(dǎo)航是很常見的設(shè)計，用于讓用戶快速找到需要的信息。而豎向的導(dǎo)航在一些特殊場景下也會被使用。本文就介紹一下如何實現(xiàn)CSS左側(cè)導(dǎo)航豎向顯示。

/* HTML */
<div class="sidebar">
<ul>
<li><a href="#">菜單項1</a></li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
<li><a href="#">菜單項4</a></li>
<li><a href="#">菜單項5</a></li>
</ul>
</div>
/* CSS */
.sidebar {
width: 200px;
height: 100%;
background-color: #f2f2f2;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.sidebar li {
margin: 5px 0;
}
.sidebar li a {
display: block;
padding: 10px;
text-decoration: none;
color: #222;
border-left: 5px solid transparent;
}
.sidebar li a:hover {
background-color: #ddd;
border-left: 5px solid #f00;
}

首先，HTML結(jié)構(gòu)方面，我們需要一個包含菜單項的ul列表，并放在一個類為sidebar的div容器中。在CSS方面，我們定義了sidebar容器的寬度為200px，高度為100%，背景顏色為#f2f2f2，且固定為在窗口左側(cè)，上方為0，不隨滾動而移動。

我們使用了flex布局，將ul列表變成了豎向排列，并給每個菜單項添加了一定的邊距。a標(biāo)簽作為菜單項的文本容器，設(shè)置了塊級顯示，文本裝飾，及初次加載時，邊框的默認(rèn)透明狀態(tài)。

當(dāng)鼠標(biāo)懸停在菜單項上時，我們定義了一個小小的樣式變化，更能吸引用戶的注意，方便他們辨識當(dāng)前所在菜單項。