スマホで横2列の縦組み、パソコンで均等な横並びになるレスポンシブなナビゲーションメニュー

スマートフォンでは横幅が狭くなるので、長いナビゲーションメニューはうまく表示することができません。レスポンシブサイトで汎用的に使えそうなナビを作ってみました。

sponsored link

デモとHTML

HTMLはul要素を使ったシンプルなリストです。ulタグのクラスはglobal-navとしました。

CSSとその解説

次にCSSです。流れとしてはスマホのスタイルから指定して、横幅1280px以上になると縦組みから横並びのレイアウトに切り替わります。長いのでまずはスマホとタブレットのスタイルから。

ulタグにclass="global-nav"としてマージンやリストスタイルなどをリセットします。
liタグにfloat: left;width: 50%;を指定して横に2つのメニューが並ぶようにします。ボーダーでスタイリングするのでbox-sizing: border-box;と指定して計算が楽になるようにしています。ボーダーボックスはCSS3のプロパティでパディングとボーダーを要素の幅と高さに自動で算出してくれます。今回の場合はボーダーも含めて左右に50%ずつの横幅になります。IE8以上です。

border-boxを指定すると、要素全体の大きさが、widthの値となります。paddingやborderの値が何であろうと要素全体の横幅はwidthの値となります。

レスポンシブデザインに便利!今さらCSS3のbox-sizingについて話してみます|Webpark

li:nth-child(odd)という疑似クラスを使って奇数番目のliタグに対してスタイルが適応されるようにしています。IE9以上ですが、今回の場合はモバイルに対して使用しているので大丈夫でしょう。

今のところ、ほぼ全てのモダンブラウザが対応済みです。Internet Explorerも9では対応済み。ただし、Internet Explorer 8では非対応となっているようです。

[CSS3] 先頭の要素にだけ別の設定をする(疑似クラス「:nth-child(n)」を覚えた) | mutter

aタグにはdisplay: block;と指定してブロック要素にしてリンクの範囲を広げて、line-height: 44px;にして中央揃えにしながら高さを広げています。メニューの文字数が多いとレイアウトが崩れてしまうので文字数を減らすかフォントサイズを小さくして調整してください。

次に1280px以上になった時のレイアウトを指定していきます。

メディアクエリで@media only screen and (min-width: 1280px){}として、この中に1280px以上になった時のスタイルを指定していきます。
ボーダーはliタグで上下左右に指定して、それ以外はnoneとしてリセットします。ボーダーが重なり合う部分があるのでborder-collapse: collapse;と指定します。この場合は1pxずつのボーダーが0.5pxずつになります。

親要素のulタグにdisplay: table;、子要素のluタグにdisplay: table-cell;と指定してtable要素のようにスタイリングします。メニューをそれぞれ均等に横並びにしたいのでtable-layout: fixed;width: 100%;も指定しておきます。


今回はメディアクエリの切り替えが1つだけのシンプルなものですが、切り換える分岐点を増やしたり、フロートさせるウィズを増減させたりするともうちょっと色んなパターンになります。jQueryを使ってハンバーガーボタンのタップでメニューの非表示をさせる方法もありますが、分かりやすさがあって操作に対するストレスが少ないのがこのレイアウトのメリットかなと思います。