cssで横並びのナビゲーション(メニュー)バーの作り方を「display: table-cell」と「display: inline-block」と「float: left」と「display: flex」の4パターンのサンプルを作ってまとめてみました。おすすめは「display: flex」です。
もくじ
デモはこちら
ナビゲーション関連記事
cssで要素を上下左右に中央寄せするサンプル
スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】
スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】
jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる
cssで作る、横並びナビゲーションバーのサンプル4種類
【jQuery】クリックで開閉するアコーディオンメニュー7種
cssだけ！jQueryを使わないスマホでよくある横から出てくるドロワーメニュー
基本の設定
htmlとcssの構造は以下の通りでulでナビゲーションをつくっています。
動作確認のために、直打ちで書いたものとJavaScriptでli部分を書き出したものの２つ作っています。
あとは横並びにする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がやるので一番すっきりしていますが、５個くらいのナビゲーションなら使うまでもないかなと思います。
コード的には一番わかりやすい指定方法ですね。
「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;一択ですね。
コメント