cssで作る、横並びナビゲーションバーのサンプル4種類

プロモーションが含まれています

cssで作る、横並びナビゲーションバーのサンプル4種類

cssで横並びのナビゲーション(メニュー)バーの作り方を「display: table-cell」と「display: inline-block」と「float: left」と「display: flex」の4パターンのサンプルを作ってまとめてみました。おすすめは「display: flex」です。

デモはこちら

cssで作る、横並びナビゲーションバーのサンプル4種類

ナビゲーション関連記事

基本の設定

htmlとcssの構造は以下の通りでulでナビゲーションをつくっています。
動作確認のために、直打ちで書いたものとJavaScriptでli部分を書き出したものの2つ作っています。
あとは横並びにするcssを書くだけの状態です。

html

<ul class="nav1">
<li><a href="">項目1</a></li>
<li><a href="">項目2</a></li>
<li><a href="">項目3</a></li>
<li><a href="">項目4</a></li>
<li><a href="">項目5</a></li>
</ul>

css

ul{
	list-style: none;
	padding-left: 0;
}
ul li{
	text-align: center;
	background: #808080;
	-webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}
ul li a{
	width: 100%;
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 50px;
}
ul li:hover{
	background: #b2b2b2;
}

「display: table-cell」でつくる

css

ul.nav1{
	display: table;
	table-layout: fixed;
	width:100%;
}

ul.nav1 li{
	width: 20%;
	display: table-cell;
	vertical-align: middle;
}

liにdisplay: table-cell;を使う場合、親要素にdisplay: table;が必要なのでulに記述しています。
こうすることで、要素をtableタグのように扱えます。

また、ulにtable-layout: fixed;としないとliの幅に割合で指定できないので注意です。

「display: inline-block」でつくる

css

ul.nav2 li{
	width: 20%;
	display: inline-block;
}

ul.nav2 li a{
	line-height: 50px;
}

次はliにdisplay: inline-block;を指定しています。
デモを見てもらうとわかると思いますが、下のスペースありの方は項目の間にスペースができてしまっています。
これはliの後ろの改行が影響していて、この対策は、

1.ulにfont-size: 0;を指定して、liにも元のフォントサイズを指定する
2.liタグ間の改行をなくす。
3.liタグ間の改行をなくす。(JavaScriptでliを書き出す)

1.はフォントサイズを無理やり変更しているので、レスポンシブ対応などでなにかしら影響が出たときに面倒です。

2.改行せずにliを書けば解決しますがコードが汚くなり更新もしづらいです。

3.は2.の作業をJavaScriptがやるので一番すっきりしていますが、5個くらいのナビゲーションなら使うまでもないかなと思います。

コード的には一番わかりやすい指定方法ですね。

「float: left」でつくる

css

ul.nav3 li{
	width: 20%;
	float: left;
}
ul.nav3 li a{
	line-height: 50px;
}
ul.nav3:after{
	content: "";
	display: block;
	clear: both;
}

次はliにfloat: left;を指定しています。
ちなみにfloat: right;にするとliの上から右詰めで表示できます。

floatは解除しないとその次の要素などのレイアウトに影響がでることがあるので、clear: both;でfloatを解除します。
今回はul.nav3の疑似要素を使ってclearの指定をしています。
こうするとul.nav3の閉じタグの前に疑似要素のafterが来るので要素内でfloatを解除できます。

「display: flex」でつくる

css

ul.nav4 {
  display: flex;
}

ul.nav4 li {
  width: 20%;
}

ul.nav4 li a {
  line-height: 50px;
}

今の横並びナビゲーションは、これってくらい使われている、display: flex;です。ulに指定するだけで横並びになります。

ちなみにulにflex-direction: row-reverseをつけると、liの最後の要素から順に表示できます。

display: flex;は、要素の順番をcss指定出来たり、こんなこともできるのってくらいいろいろできます。

liの余白問題も気にしなくていいですね。

作り方は状況と作りたいもので選ぶ

この記事を書いた当初は、JavaScriptでHTMLの商品リストを作ることが多く、もっぱらinline-blockでしたが今となってはdisplay: flex;一択ですね。

cssで作る、横並びナビゲーションバーのサンプル4種類

コメント

タイトルとURLをコピーしました