Simple CSS Menus: One-Line Menu.

一行 Menu ，在同人界經常都可以看見。做法簡單，很適合初心者。以下會參考しろ先生的設計來進行。

Screenshot of the Menu. しろ先生網頁的 Menu [050320] 。

假設我們有一個 ID 為 nav 的 Unordered List 。

<ul id="nav">
 <li><a>Item 1</a></li>
 <li><a>Item 2</a></li>
 <li><a>Item 3</a></li>
 <li><a>Item 4</a></li>
 <li><a>Item 5</a></li>
</ul>

像這種 Navigation 可以說是最簡單的一種形式了。

這個很方便，把 li element 變成 inline 就行，順便還可以置中掉。

ul#nav {
 text-align: center;
}
ul#nav li {
 display: inline;
}

因為 li element 已經被 Display 為 inline ，不再具有 List item 的特性，所以像是設定 list-style property 之類的動作可以省掉。

接下來是在所有 Link 左面都有的裝飾物，下面是最簡單直接的方法。

ul#nav li::before {
 content: "\25CF";
}

使用 Generated Content 在所有 li elements 左邊都加上一個圓形裝飾物 (25CF 是這個圖案在 Unicode 中的位置) 。選擇在 li 而不是在 a 加上的原因是因為這個裝飾物是 non-clickable 的。

到最後再調較一下位置和顏色便成了。

問題在於 IE 並不支援 Generated Content 。 IE 具有超越 80% 以上的市佔率，雖然很不願意但我們需要使用另一種方法。

ul#nav li {
 background: url(./libg.gif) no-repeat left bottom;
 padding-left: 10px;
}

調整一下 li elements 的 padding 後再把相應的背景貼上去即可。這下子有支援 CSS 的 Browser 應該都可以正常顯示了。

就這樣。

Xiao Yao