HOME>いろいろな横並びメニュー
メニューのリストを横に並べるには
各リスト項目<li>に対して float:left を適用し、各項目を左に回り込ませ横並びにします。
横に並べるメニューは幾つかあります。
ほんの少しだけでも紹介したいと思います。
いろいろな横並びメニュー
マウスを上に乗せると色が変わる。 隙間が空いている。
id "menubar" の部分は任意の名前です。自分の好きな名前にしても、このままでもＯＫです。
ＨＴＭＬ
ＣＳＳ
マウスを上に乗せると色が変わる。 隙間が空いてない。
ＨＴＭＬ
ＣＳＳ
マウスが上に乗るとインデックスの背景色が変わる
ＨＴＭＬ
ＣＳＳ
マウスが上に乗ると背景色が変わるボタンみたいなメニュー
ＨＴＭＬ
ＣＳＳ
マウスが上に乗ると左側に画像が出るメニュー
ＨＴＭＬ
ＣＳＳ
マウスが上に乗るとアンダーラインが出て背景の色が変わるメニュー
ＨＴＭＬ
ＣＳＳ
floatを使わずに横並びにする方法(display:inline-block;)を使う。
ＨＴＭＬ
ＣＳＳ