jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる

cssでシュッと動かす動きをつけて、jQueryで開閉させるとハンバーガーメニュー(アコーディオンメニュー)の開閉ボタンをアニメーション付きで変化させる方法

jqueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させるサンプル

ナビゲーションメニュー関連記事

htmlとjs

html

<h3 class="open_h3">BRAND INFO</h3>
<span class="btn"><span></span></span>
<p class="info open"></p>

$('.open').each(function(){
    $(this).css("height",$(this).height()+"px");
});
$('.open').hide();
$('.btn').click(function () {
    $('.open').slideToggle('slow');
    $(this).toggleClass('on');
});

コードは【jquery】クリックで開閉するアコーディオンメニューいろいろの基本形と同じです。

これをベースに変更していきます。

htmlにボタン用の<span class=”btn”><span>をつけるだけです。

jsはもともと開閉用クラスをつける処理を含んでいるので特に変更しません。

cssで動きをつける

css

.btn{
    width: 35px;
    height: 35px;
    position: absolute;
    right :15px;
    top: 7px;
}
.btn:before,
.btn:after,
.btn span{
    display: block;
    width: 80%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.btn span{
    height: 3px;
    background-color: #000;
    top: calc(50% - 1.5px);
}

.btn:before{
    content: "";
    top: calc(25% - 3px);
    border-top: 3px solid #000;
}
.btn:after{
    content: "";
    bottom: calc(25% - 3px);
    border-bottom: 3px solid #000;
}
.btn.on span{
    display: none;
}

.btn.on:before{
    top: calc(50% - 1.5px);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.btn.on:after{
    bottom: calc(50% - 1.5px);
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

ざっくりと説明すると、
疑似要素でハンバーガーメニューの横棒を作ってます。疑似要素だけだと2本しか作れないのでspanでもう一本足しています。

これらにtransitionで動かす時間を設定します。

jsでボタンクリックされるとonというクラスが着脱されるので、クラスがついているときにtransformで棒の傾きを変更しています。

棒の位置を％指定するだけではキッチリ並んでくれません。
線の太さで位置がずれるのでcalc(50% – 1.5px);でボーター分引いてあげるとうまくいきます。

線の長さは％指定してあるので.btnの正方形の大きさを変更すると大きくなるのでpositionで位置調整すればそのまま使えます！