CSS3で横並びのメニューを簡単に作る方法

CSS3で横並びのメニューを簡単に作る方法

HTML5とCSS3って、IEを考えるとまだまだ先かな・・・と思っていたのですが、スマートフォンの登場で事情が変わってきました。
スマートフォンサイトだとIEを気にしなくていいので、HTML5とCSS3を使えるっ。
というわけで、CSS3で横並びのメニューをさくっと作ります。


画面いっぱいの横並びメニュー

今回作るのはこんなメニューです。
横並びメニューの完成イメージ
Firefox、GoogleChrome、Safari、iPhone、androidに対応していますが、
InternetExplorerには対応していません、見ると崩れます(IE9ではどうなのかな?)。


メニューのHTMLは従来どおり、liタグでこんな感じにしておきます。
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Information</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">Contact</a></li>
</ul>

従来なら「float:left」で回り込ませるのですが、今回はCSS3の「display:box」と「box-flex:1」を使います。
親要素であるulに「display:box」と「width:100%」を指定し、横並びにする子要素であるliに「box-flex:1」を指定します。
ul {
	display: -webkit-box;
	display: -moz-box;
	width: 100%;
}

li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}

これだけで、画面いっぱいの横並びメニューが出来ます。
(※デザインする為のスタイルは省略しています)

ulに「width:100%」が指定されていないと、左に詰まってしまいますので注意。
floatした後にclearしたり、clearでうまく行かないときはclearfix使ったり、幅があわずにメニューが入りきらずに落ちたりしていた苦労は一体何だったのか・・・
サンプル1



これはこれでいいのですが、メニューの幅を均等にしたい場合は、li要素に対して適当にwidthを設定します。
li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	
	width: 1000px;
}
そうすると、各メニューの幅が均等になります。
簡単ですねーっ!
横並びメニューの完成イメージ
サンプル2



CSS3とは関係ないですが、パンくずやサブメニューは横いっぱいに配置したり、均等配置する必要もないので、「display:inline」を使ってするといいと思います。
li {
	display: inline;
}

パンくずならliを使わずに普通にpで書いてしまってもいい気がするんですが、それはそれで。
サンプル3
※サンプルでは「>」を、CSSの:after疑似要素で記述しています。


挙動の確認に関してiPhone系はiPhone4、iPod touch第三世代で確認。
android系はau IS03、docomo GALAXY S、エミュレータではandroid1.6でも一応確認していますが、間違いなどあれば指摘していただけると嬉しいです。



[参考]
CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture
Tag

“CSS3で横並びのメニューを簡単に作る方法” への1件のフィードバック

  1. CSSで横並びのメニューを作る | CSSリファレンス より:

    [...] うにまくら.jp [...]

コメントを残す