- August 24, 2005 9:20 AM
- XHTML CSS
2007-01/20更新しました。
ソースコードを見直してボタン化の方法を変えました。基本CSSボタンメニューと同じ方法で、floatとfloatによるクリアの問題を解決するためのコードも含めました。これにより、コピペで問題なく使えるようになりました。
変更点は以下の通りです。
- floatをクリアするコードも含めた。ページ下部にはMacIEに対応する場合の追加コードも記述
- a要素にwidthを指定していたのを、親要素に変更。これにより、a要素には左右にpaddingが指定できるようになった。
- HTML側でulとliのセットのみでボタン化できるようにした。
- プロパティの記述順序を変更
ボタン横並びナビゲーションメニューのサンプル
<ul id="globalNavi"> <li><a href="./">List1</a></li> <li><a href="./">List2</a></li> <li><a href="./">List3</a></li> <li><a href="./">List4</a></li> </ul>
id名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。
これを基本に、背景画像を入れたりpaddingを調整すれば色々作れます。
li要素がフロートすることによって、包含ブロックであるul要素は高さの算出する子要素がなくなり、ぺっちゃんこになってしまうので、擬似要素によるクリアをコード中にいれています。もし、MAC IEに対応する必要がある場合は、ul#globalNaviには次のコードを追加してください。
ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;
/* for MacIE5.x \*//*/
overflow: hidden;
/* end */
}
WIN IE6では親要素がposition: absoluteしないと何故かA要素のマウス反応範囲が消えてしまうので、absoluteしない場合はA要素にposition: relative;が必要。
- Newer: DT DDを横並び
- Older: CSS メニューボタン
