[CSS]スクリプト無しで実装する、タブが重なり合うナビゲーション

Henry Hoffmanのエントリーから、スタイルシートで実装する、タブが重なり合うナビゲーションの紹介です。

ナビゲーションの項目はリスト要素となっており、タブが重なり合う箇所はspanが二重になっています。

<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>

対応ブラウザは、IE5.5, 6, 7, Fx2, Op9.25, Safari3(All on Windows)で、IE5.5用にはvoice-familyのハックが使用されています。