ハンバーガーメニューのあのバッテンのつくりかた

みなさまおはこんばんちは（古い）。お久しぶりです。web制作にかかわってる人です。

今日はハンバーガーメニューのあの記号と、メニューが開いてるときのあのバッテンを
画像を使わずcssとjsだけで実現するってのをやってみたいと思います。

相変わらずのbefore、after炸裂かつちょっとだけjsも使うよ。

まずはhtmlマークアップ

<button>メニュー</button>

これだけ。

ここにjs(相変わらずjquery使用)で

$('button').prepend('<span>');

とすることにより
DOM上では

<button><span></span>メニュー</button>

という記述にすることができましたー
バッテンにするためにはもう一回jsの力を借りますが、
ハンバーガーメニューのあの三本線を作るためならここまでで下準備は完了です。

あとは
buttonの大きさとテキストの大きさを調整してbutton自体にはpositionでstutic以外の値をかけます（ハンバーガーを描くときの基準位置にするため）。
その後buttonの中のspan（これです！これですよ！さっき足したspan！）に
こんな感じのスタイルをかけます。

button span{
	background: #1E1E1E;
	width: 26px;
	height: 2px;
	margin: 0 0 0 -13px;
	display: block;
	position: absolute;
	top: 18px;
	left: 50%;
}

そしたらこう！

これがあの三本線の真ん中ですね。ここが基準になります。
線の大きさだとか位置だとかはいい感じのところを探してみてください。

こいつにbefore、afterをこんな感じでどーん。（contentの入れ忘れはせんかったで！（←このちょっと前にやってる））

button span:before,
button span:after{
	background: #1E1E1E;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
}
button span:before{
	transform: translate(0,8px);
}
button span:after{
	transform: translate(0,-8px);
}

はいハンバーガーメニュー的なボタンのでーきあーがりーーーーーー！！！

ここから後半戦！
これをクリックしたとき、　こう変化させる方法について

まず後半戦の下準備
さっきjsでspanを追加したときと同じくまたjsさんの登場です。

$('button').on('click',function(){
	$(this).toggleClass('open');
});

これでボタンをクリックしたときにopenというクラスがついたり外れたりします。
ここで影響するのは指定しているopenというクラスだけなので、
これ以外のクラスをつけていたとしてもそれはそのまま使用できます！
なので基本的なスタイルを特定のクラスにつけておいて、状態変化が起こるものだけopenのクラスで上書きするといった書き方が基本ですかね。

これで下準備ができました。

あとはcssでbuttonにopenクラスがついたときの見え方を指定してやると

button.open span{
	background: rgba(30,30,30,0);
}
button.open span:before{
	transform: rotate(45deg);
}
button.open span:after{
	transform: rotate(-45deg);
}

こんな感じになりましたーーーー！！いえー


……うん。でもさ、これ、あんまりにもパッパッって切り替わりすぎじゃない？
もうちょっと滑らかに動かない？

もう一手間いきましょか！！！

button spanとbutton span:before、button span:afterにそれぞれtransitionをかけます。
そしてbutton span:beforeとbutton span:afterにかけてたrotate(45deg)、rotate(-45deg)をそれぞれrotate(135deg)、rotate(-135deg)に！


滑らかかつちょっと派手になりましたー！！！
transitionやtransformはベンダープレフィックスが必要な場面もありますのでご注意くださいねー


こんな感じで小技を使いながら日々業務にいそしんでおりますよっと。

ではでは、実は今年初記事だったweb制作にかかわってる人でしたー