Simple CSS Menus: One-Line Menu.
一行 Menu ,在同人界經常都可以看見。做法簡單,很適合初心者。以下會參考 しろ 先生的設計來進行。 しろ先生網頁的 Menu [050320] 。 Preparation. 假設我們有一個 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 可以說是最簡單的一種形式了。 View . Make It One-Line. 這個很方便,把 li element 變成 inline 就行,順便還可以置中掉。 ul#nav { text-align: center; } ul#nav li { display: inline; } 因為 li element 已經被 Display 為 inline ,不再具有 List item 的特性,所以像是設定 list-style property 之類的動作可以省掉。 View . Accessory. 接下來是在所有 Link 左面都有的裝飾物,下面是最簡單直接的方法。 ul#nav li::before { content: "\25CF"; } 使用 Generated Content 在所有 li elements 左邊都加上一個圓形裝飾物 ( 25CF 是這個圖案在 Unicode 中的位置) 。選擇在 li 而不是在 a 加上的原因是因為這個裝飾物是 non-clickable 的。 View . Decoration. 到最後再調較一下位置和顏色便成了。 View , screenshot . Problem. 問題在於 IE 並不...