カスタマイズが簡単なハンバーガーメニュー

カスタマイズが簡単なハンバーガーメニュー

実際に紹介しているハンバーガーメニューをカスタマイズしてみましたのでこちらもどうぞ

簡単にできるハンバーガーメニューをいじってみた

ドロワーメニューをアニメーションさせる方法

こんにちは、ちゃんけいです。

今回は、CSSで簡単にできるハンバーガーメニューを紹介します。
当サイトのメニューでもほぼ同じコードを使用しているので、ぜひ参考にしてみてください。

HTMLとjQueryを簡単に紹介

簡単なスマートフォンサイトのメニューを作ってみましょう。
ナビゲーションは「g-nav」をルートにマークアップします。このg-navがハンバーガーメニューをクリックすると開くメニューになります。

ハンバーガーメニューは「sp-menu」をルートにマークアップします。こちらにCSSを適用してハンバーガーメニューにしていきます。

HTMLのサンプルはこんな感じになります。

See the Pen jyyvZM by Chankei (@Chankei) on CodePen.0

jQueryは簡単に、ハンバーガーメニューの動きのためのクラスの付け替えを「toggleClass」で、メニューを開いたり閉じたりするのに「slideToggle」を使用しています。
とってもシンプルで簡単ですね!

jQueryのサンプルはこんな感じになります。

See the Pen jyyvZM by Chankei (@Chankei) on CodePen.0

CSSアニメーションでハンバーガーメニューを動かす

本題のカスタマイズですが、CSSのアニメーションを使用して動きのカスタマイズします。
ここで注目するのは下の二つです。

  • 「:nth-of-type(n)」
  • 「.active:nth-of-type(n)」

ハンバーガーメニューの一つ一つの線を位置を指定しているもので、「.active」のついている方が動いた後の状態を、ついていない方が動く前の状態を指定しています。
どこから、どこへ動かしたいかを考えてみるとうまくいきます。きっと。
基本的にCSSを変更することで様々な動きができるのでぜひやってみてください。

See the Pen jyyvZM by Chankei (@Chankei) on CodePen.0

完成、まとめ

今回の完成品がこちら!

See the Pen jyyvZM by Chankei (@Chankei) on CodePen.0

簡単にできて汎用性が高い!と、思っているのでおすすめです!

いつかCSSアニメーションの記事も書きたいと思います。
それでは、また次回の記事でお会いしましょう!ちゃんけいでした。