※ 2023年9/17 codepenの表示を修正しました、中のコードはとても古いので今後最新の書き方に変更します
実際に紹介しているハンバーガーメニューをカスタマイズしてみましたのでこちらもどうぞ
簡単にできるハンバーガーメニューをいじってみた
ドロワーメニューをアニメーションさせる方法
今回は、CSSで簡単にできるハンバーガーメニューを紹介します。
当サイトのメニューでもほぼ同じコードを使用しているので、ぜひ参考にしてみてください。
HTMLとjQueryを簡単に紹介
簡単なスマートフォンサイトのメニューを作ってみましょう。
ナビゲーションは「g-nav」をルートにマークアップします。このg-navがハンバーガーメニューをクリックすると開くメニューになります。
ハンバーガーメニューは「sp-menu」をルートにマークアップします。こちらにCSSを適用してハンバーガーメニューにしていきます。
HTMLのサンプルはこんな感じになります。
See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.
jQueryは簡単に、ハンバーガーメニューの動きのためのクラスの付け替えを「toggleClass」で、メニューを開いたり閉じたりするのに「slideToggle」を使用しています。
とってもシンプルで簡単ですね！
jQueryのサンプルはこんな感じになります。
See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.
CSSアニメーションでハンバーガーメニューを動かす
本題のカスタマイズですが、CSSのアニメーションを使用して動きのカスタマイズします。
ここで注目するのは下の二つです。
- 「:nth-of-type(n)」
- 「.active:nth-of-type(n)」
ハンバーガーメニューの一つ一つの線を位置を指定しているもので、「.active」のついている方が動いた後の状態を、ついていない方が動く前の状態を指定しています。
どこから、どこへ動かしたいかを考えてみるとうまくいきます。きっと。
基本的にCSSを変更することで様々な動きができるのでぜひやってみてください。
See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.
完成、まとめ
今回の完成品がこちら！
See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.
簡単にできて汎用性が高い！と、思っているのでおすすめです！
いつかCSSアニメーションの記事も書きたいと思います。