[CSS]ナビゲーションに明確なラベルを与えて実装するスタイルシート

dl要素で明確なラベルを与え、シンプルながらスタイリッシュなナビゲーションを実装するスタイルシートをZURBから紹介します。

How to Create Simple and Effective Sub Navs with Definition Lists
demo

HTMLは、dl要素でシンプルに実装します。

HTML

<dl>
<dt>On This Page:</dt>
<dd><a href="">Final Wireframes</a></dd>
<dd><a href="">Updated Wireframes</a></dd>
<dd><a href="">Initial Wireframes</a></dd>
<dd><a href="">Sketches</a></dd>
</dl>

CSSは、CSS3の角丸を使用します。

CSS

dl.nav { display: block; width: auto; height: 27px; margin: 0 0 18px; }
dl.nav dt, dl.nav dd { float: left; display: inline; }
dl.nav dt { color: #999; font-weight: normal; }
dl.nav dd a { text-decoration: none; margin-left: 6px; padding: 5px 12px;
 -webkit-border-radius: 12px; -moz-border-radius: 12px; }
dl.nav dd a:hover { background: #eee; }
dl.nav dd.active a { background: #2daebf; color: #fff; }

デザイン的にはdt要素がちょっと足りない気もしますが、カテゴリと現在位置が明示されているのはいいですね。