[CSS]幅指定をしないで中央配置するナビゲーションを実装するスタイルシート

Post on:2009年6月15日

sponsors

各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。

ナビゲーションはリスト要素で、中央配置は「display:table;」と「text-align:center;」で実装されています。
IE用に条件付コメントでテーブル要素を使用しています。

ドロップダウンで表示されるパネルの右側には透明なエリアがあり、パネルのオープンをキープするマウスのエリアをより広く確保しています。

対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeとのことです。

また、同じくドロップライン型のものも公開されています。

こちらの対応ブラウザはIE6/7/8, Fx, Op, Safari(PC), Chromeとのことです。