各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。
Anywidth dropdown with centered top and sub levels
demo
ナビゲーションはリスト要素で、中央配置は「display:table;」と「text-align:center;」で実装されています。
IE用に条件付コメントでテーブル要素を使用しています。
ドロップダウンで表示されるパネルの右側には透明なエリアがあり、パネルのオープンをキープするマウスのエリアをより広く確保しています。
対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeとのことです。
また、同じくドロップライン型のものも公開されています。
Anywidth dropline with centered top and sub levels
demo
こちらの対応ブラウザはIE6/7/8, Fx, Op, Safari(PC), Chromeとのことです。
Post on:2009年6月15日
