左側導航菜單是網站界面設計中非常常見的元素。它可以讓用戶更方便地瀏覽和訪問網站的各個頁面,提高用戶體驗。在實現左側導航菜單時,我們可以使用CSS對其進行樣式的設計。
/* 左側導航菜單樣式 */ .nav { width: 200px; background-color: #f5f5f5; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { padding: 10px; border-bottom: 1px solid #ddd; } .nav ul li:hover { background-color: #e8e8e8; } .nav ul li a { text-decoration: none; color: #333; } .nav ul li.active { background-color: #fff; } .nav ul li.active a { font-weight: bold; }
以上是一個簡單的左側導航菜單CSS樣式代碼。首先我們設置了整個導航欄的寬度,以及背景顏色。然后我們使用了無序列表來實現每一項的菜單,并對其樣式進行了定義。每一個菜單項都有一個上下10像素的內邊距,并且下方都有一條1像素粗的灰線作為分隔線。當用戶鼠標懸停在某個菜單項上時,會出現一個底色為淺灰色的效果。此外,我們還定義了一個.active類,它用于標識當前被選中的菜單項,它的底色為白色,并且文字加粗。
以上是一個簡單的左側導航菜單CSS樣式代碼。我們可以根據實際需求對其進行修改和優化,以滿足不同的設計需求。
上一篇左側導航條css在線