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

各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートを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とのことです。

sponsors

top of page

©2018 coliss