CSS FlexBoxを使ってレスポンシブなナビメニューをつくってみました!

2016/06/19

12_1
FlexBoxは少ないコードでレイアウトを変えることができて要素の横並びも簡単にできます。FlexBoxでロゴとメニューが横並びになっているナビメニューをつくってレスポンシブにも対応させてみました。
 
まずは、FlexBoxの基本から順につくっていきましょう!

ブラウザの対応状況

最新版のモダンブラウザでは対応していて、Safariは-webkit-のベンダープレフィックスを合わせて記述することで利用することができます。IEに関してはIE10とIE11で対応していますが、記述方法が変わったりバグがあるようです。

要素を横並びにする

よくあるロゴとメニューが横並びになっているレイアウトをつくるために、それぞれのhtmlタグを記述します。

<header>
	<nav>
		<h1>WebLifeTimes</h1>
		<ul>
			<li><a href="#">menu1</li></a>
			<li><a href="#">menu2</li></a>
			<li><a href="#">menu3</li></a>
			<li><a href="#">menu4</li></a>
			<li><a href="#">menu5</li></a>
		</ul>
	</nav>
</header>

 
cssは横並びにしたい親要素にdisplay:flexを記述します。

nav{
 display: flex;
 -webkit-display: flex;
}

 
実際の見栄えはこんな感じになります!もとの状態を見たい場合はdisplay: flex;の部分をdisplay: block;に変えてみてください。

See the Pen FlexBox Test by madka (@madka) on CodePen.0

これまではfloatやinline-boxを使っていましたが副作用の処理もしなくてはいけなかったのでこれは非常に便利です!

ロゴとメニューの位置を調整する

align-itemsで要素の高さを調整することができます。上揃えはflex-start、下揃えはflex-end、真ん中揃えはcenterなので今回はalign-items: center;を設定します。左右の配置はjustify-contentで調整することができますが、今回はh1にmargin-right: auto;だけで大丈夫です!
 

追記するcss

h1{
 margin-right: auto;
}
ul{
 align-items: center;
 -webkit-align-items: center;
}

 

See the Pen FlexBox Test2 by madka (@madka) on CodePen.0

これで基本的なレイアウトは完成です!

ブレイクポイントでメニューのレイアウトを変える

一定のウィンドウサイズになったら横並びになっているメニューを縦方向に変更してテキストを真ん中揃えにしてみましょう。
flex-direction: column;で要素を上から順に並べることができるので、ulに設定してあげると縦並びになります。
さらに、tex-align: center;でテキストを真ん中揃えにします。
 

追記するcss

ul{
@media (max-width:735px){
 a{
  padding: 0px;
 }
 flex-direction: column;
 -webkit-flex-direction: column;
 }
 li{
  tex-align: center;
 }
}

 

See the Pen FlexBox Test3 by madka (@madka) on CodePen.0

ウィンドウ幅を狭めるとmenu部分のレイアウトが変わります。今回ブレイクポイントは735pxで設定しています。

完成したメニュー

ブレイクポイントでのレイアウト変更ができたら、その他の部分にcssとjsの調整を加えてメニューアイコンをクリックすると上からスライドで表示されるようにします。今回はFlexBoxを使ったところをメインとしているので他の調整部分などは省略します。
 

See the Pen FlexBox Responsive Menu by madka (@madka) on CodePen.0

こちらの完成版はcssをsassで記述しています。

おまけ

少し記述を変えるとフル画面でフェイドするメニューにすることができます。
 

css

ul{
 @media #{$sp}{
  top: 0px; /*80を0に変えます*/
 }
}

 

js

$("nav ul").fadeToggle(); //slideをfadeに変えます

 

See the Pen FlexBox 2 by madka (@madka) on CodePen.0

こんな感じにアニメーションが変わります!

IEへの対応などを考えなくてよければ、FlexBoxはとても便利なのでスタンダードな手法になってくると思います!今回のメニューづくりではFlexBoxの使い方を一部しか利用していないので他のプロパティも覚えるとコーディングが楽になりそうです。

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend