[CSS]スクリプト無しで実装する、タブが重なり合うナビゲーション
Post on:2008年4月9日
sponsors
Henry Hoffmanのエントリーから、スタイルシートで実装する、タブが重なり合うナビゲーションの紹介です。
CSS Overlapping Tabbed Navigation(デモ)
ナビゲーションの項目はリスト要素となっており、タブが重なり合う箇所はspanが二重になっています。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="nav"> <li><a href="#" class="start"><span class="right"><span class="center">Menu Item</span></span></a></li> <li><a href="#"><span class="right"><span class="center">Longer Menu Item</span></span></a></li> <li><a href="#"><span class="right"><span class="center">Small</span></span></a></li> <li><a href="#"><span class="right"><span class="center">Menu Item</span></span></a></li> <li><a href="#"><span class="end"><span class="center">Menu Item</span></span></a></li> </ul> </textarea> |
対応ブラウザは、IE5.5, 6, 7, Fx2, Op9.25, Safari3(All on Windows)で、IE5.5用にはvoice-familyのハックが使用されています。
sponsors
