こんにちは。すずきです。
この記事では実際によく使われるハンバーガーメニューの開閉アニメーションを紹介します。
- ハンバーガーメニューの開閉をオシャレにしたい
- ハンバーガーメニューの実装方法で指示を受けている
- ハンバーガーメニューの実装方法がイメージ通りにいかない
はじめに
ハンバーガーメニューは共通のものを使用します。jQuery
でボタンとハンバーガーメニューのclassをつけ外し、デザイン調整をCSS
で実装しています。
ハンバーガーメニューの実装方法についてはこちらの記事で解説しています。
![](https://web-note.org/wp-content/uploads/2022/10/thumbnail-640x396.jpg)
スライドイン
See the Pen 【スライドイン】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.
.drawer__nav__inner {
transform: translateX(100%);
transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__nav.active .drawer__nav__inner {
transform: translateX(0);
}
transform: translateX(100%);
でメニューの横幅分、横にスライドさせ、ハンバーガーメニュー展開時に元の位置に戻るようにしています。transform: translateX(-100%);
で逆方向からスライドさせたり、transform: translateY(100%);
で縦方向にスライドさせる事もできます。
フェードイン
See the Pen 【フェードイン】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.
.drawer__nav__inner {
opacity: 0;
transition: opacity 0.3s ease;
}
/* 展開時のデザイン */
.drawer__nav.active .drawer__nav__inner {
opacity: 1;
}
opacity: 0;
の状態からハンバーガーメニュー展開時にopacity: 1;
に変更し、transition: opacity 0.3s ease;
でスピードを調整しています。
回転しながら表示
See the Pen 【回転しながら表示】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.
.drawer__nav__inner {
transform-origin: top right;
transform: rotateZ(90deg);
transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__nav.active .drawer__nav__inner {
transform: rotateZ(0deg);
}
transform-origin: top right;
で回転する原点を指定し、transform: rotateZ(90deg)
で要素を回転させておきます。
ハンバーガーメニュー展開時、transform: rotateZ(0deg);
で回転させている要素を元に戻します。transform-origin
の位置を変更することで、様々な場所から出現させることができます。
まとめ
ハンバーガーメニューの開閉アニメーションでよく使われるものを解説しました。
ここからカスタマイズすることで色々な出し方に対応できるようになります。