【プログラミング】変形するハンバーガーメニューの作り方【jQueryで実装】

今回は、変形するハンバーガーメニューの作り方を解説していきます。
cssが多いのでややこしくなりますが、全てコピペでOKなので是非見てってください。

スポンサーリンク

変形するハンバーガーメニューの作り方

変形するとは何かというと、イメージはこんな感じです。

ハンバーガーメニューが、アイコンになる感じです。
表現しづらいので、実際に作ってみたほうがいいです。

早速ですが、コードはこちらです。

スポンサーリンク

HTML

<div class="header__btn">
    <a href="#" id="panel-btn">
        <span id="panel-btn-icon"</span>
    </a>
</div>

イメージはspanタグ:after :beforeの３つで、三本線をつくります。

CSS

.header__btn {
position: absolute;
top: 13px;
right: 15px;
}

#panel-btn {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
}

#panel-btn-icon {
display: block;
transition: 0.2s;
}
#panel-btn-icon:before,
#panel-btn-icon:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 29px;
height: 2px;
background: #fff;
transition: 0.2s;
}
#panel-btn-icon:before {
margin-top: -6px;
}
#panel-btn-icon:after {
margin-top: 4px;
}

#panel-btn .close:before,
#panel-btn .close:after {
margin-top: 0;
}
#panel-btn .close:before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#panel-btn .close:after {
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
}

/* jQuery実装部分 */
.close {
opacity: 1;
}
#panel-btn .close:before,
#panel-btn .close:after {
margin-top: 0;
}
#panel-btn .close:before {
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
}
#panel-btn .close:after {
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
}

ポイントはtransfomのアニメーションで三本線がになる感じです。
transitionでアニメーションの速度が決めれます。

jQuery

$(function () {
$("#panel-btn").click(function () {
 $("#panel").slideToggle(200);
  $("#panel-btn-icon").toggleClass("close");
  return false;
 });
});

クリック時にslideToggleでスライドできるようにします。

部分的には難しいのでコピペでOKです。
それでは、以上です！