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

ダンジョンの先で見つけた宝箱(ティッシュ)
意味不明な無料素材集めが楽しいです。
最近はこのサイトのリニューアルに向けて、デザイン頑張ってます。。。
デザインって難しいけど楽しいですね、ちろっと中身を言うとリニューアルの目的は

• このブログの直帰率を下げること
• ロゴを変えたのでそのついで

なので、こうすればもっと記事を読んでくれるんじゃ、、、？とか考えてます。その前に記事のクオリティを上げないといけないんですが、、、
さて、今回は以前紹介した、「カスタマイズが簡単なハンバーガーメニュー」を実際にいじってみようと思います。
それでは行ってみましょう！

さくっとHTML,jQueryを紹介

See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.

こんな感じになっています。
簡単ですね、もう少し説明を！という方は以前の記事を読んでいただけると幸いです。
今回はこの中でCSSをいじってすこしだけ動きを変えてみようと思います。

1, 棒の動き方を変える

ハンバーガーメニューを構成している、横棒( バンズ？ )の動き方を変更してみましょう。

今回紹介する基本の動きを1つできるとあとは個人の想像と自由でなんとかなると思います！

動かす部分はこちらの部分です。()の中に動く角度がはいります。

• transform: rotate();

下のサンプルでは、値を大きくしてくるっと回転するようになりました。いろいろいじってみてください。

慣れてくると、一緒にかかれている「translateY」の部分もいじってみると動いた後の場所が変わるはずです。簡単に矢印の形で止まるようにもできます。

See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.

2, 枠をつけてみる

こちらは擬似要素を使ってすこし可愛い動きをつけてみましょう。

cssのkeyframeアニメーションを使っていきます。すこしだけ難易度は上がりますが、jsをいじるより簡単です。

擬似要素で円形を作り、それを1/4ごとに透過させて動いているように見せています。

See the Pen ハンバーガーメニュー by Chankei (@Chankei) on CodePen.

keyframeの詳しい説明に関しては長くなるのでまた別の機会にしたいと思います。

jsが書けなくても簡単にアニメーションができるのはとっても嬉しいですね。

まとめ

いかがでしたでしょうか？
ハンバーガーメニューを学ぶ事で、CSSアニメーションを学ぶ事ができるなと個人的には感じています。
今度いろいろなパターンを作ってギャラリーのようにしておこうと思いますのでしばしお待ちを。。。
この記事を読んだ方がWebサイトに訪れるユーザーを、ちょっとしたCSSアニメーションで笑顔にできるようになれば幸いです。