[CSS]ナビゲーションに明確なラベルを与えて実装するスタイルシート
Post on:2009年10月14日
dl要素で明確なラベルを与え、シンプルながらスタイリッシュなナビゲーションを実装するスタイルシートをZURBから紹介します。
How to Create Simple and Effective Sub Navs with Definition Lists
demo
HTMLは、dl要素でシンプルに実装します。
HTML
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
CSSは、CSS3の角丸を使用します。
CSS
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> 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; } </textarea> |
デザイン的にはdt要素がちょっと足りない気もしますが、カテゴリと現在位置が明示されているのはいいですね。
sponsors