問題
6ハンバガーメニューアイコンを作ろう
jQueryの問題に挑戦しよう！
問題
「ハンバガーメニューアイコンを作ろう」
今回はハンバーガーメニューのアイコンを自作してみましょう！題材として学べることが多いため問題にしました。
あらかじめエディタに書くコード
<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¥
期待する画面
解答と解説（ハンバガーメニューアイコンを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まず今回の解答の考え方の大枠を説明します。最初にcontainerにopenというidを与え、クリックされたらcloseというidに変更、逆もまた然り。という方法をとりました。なのでopenからcloseへの処理とcloseからopenへの処理はアニメーションの順番が違うだけで考え方は全く同じなので解説ではopenの方だけを説明します。
ではいきなり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に対応していません。なので今回はこのような面倒な処理をしました。
