LINEでログイン
Googleでログイン
Twitterでログインハンバガーメニューアイコンを作ろう
問題
今回はハンバーガーメニューのアイコンを自作してみましょう！題材として学べることが多いため問題にしました。
自分の環境に書くコード
<div class="container" id="open">
<span class="top bar"></span>
<span class="middle bar"></span>
<span class="bottom bar"></span>
</div>
¥HTML¥
.container{
position: relative;
width: 30px;
height: 30px;
background-color: #000;
padding: 10px;
cursor: pointer;
}
.bar{
position: absolute;
width: inherit;
height: 3px;
background-color: #fff;
border-radius: 5px;
}
.top{
top: 28%;
}
.middle{
top: 48%;
}
.bottom{
top: 68%;
}
¥CSS¥
期待する画面
解答ソースコード
#close .top{
transform: rotate(45deg);
}
#close .bottom{
transform:rotate(-45deg);
}
¥CSS¥
$(function () {
$("body").on("click","#open",function(){
$(".top").animate({top:"48%"},300),
$(".bottom").animate({top:"48%"},300,function(){
$(".middle").animate({opacity:0},0);
$(".bar").css("transition",".3s");
$("#open").attr("id","close");
});
});
$("body").on("click","#close",function(){
$("#close").attr("id","open");
$(".middle").animate({opacity:1},300,function(){
$(".bar").css("transition","none");
$(".top").animate({ top: "28%" }, 300);
$(".bottom").animate({ top: "68%" }, 300);
});
});
});
¥JavaScript¥
完了にする！
解説
ではいきなりbodyに対してonを指定していることに疑問を抱きませんでしたか？普通に#openにclickイベント設定すればよくない？と思うのが普通だと思います。しかし、今回は先ほど話した通りidを変更します。なのでonによって親要素から指定しています。これについては違う問題で解説しているのでそちらを参考にしてください。
今回は上と下のbarが真ん中に集まってから回転して広がるようなアニメーションなのでこのアニメーションの順番を決めてあげなければなりません。
まずattrですがここはいいでしょう。その次のanimateはanimate({cssの設定},アニメーションの時間,アニメーション終了後の処理)、と設定できるのでこのアニメーション終了後の処理にbarが開く処理を書きます。barが開く処理は簡単で、まず真ん中のバーを消し、barにtransitionで変化にかかる秒数を指定し、最後にidを変更します。そしてcssに#close .topなどをセレクタとして設定しているとid変更後にこのセレクタ内のrotateによって回転します。
ではなぜわざわざjqueryのanimateでtransform:rotateを設定しないのかと疑問に思われると思いますが、実はanimateはtransformに対応していません。なので今回はこのような面倒な処理をしました。