ハンバーガーメニュー

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ハンバーガーメニュー

今回はハンバーガーメニューをクリックした時のアニメーションを作りました。

おさえておきたいところ

ハンバーガーメニューを使う目的と使いどころはこんな感じです。

       目的：ナビゲーションを収納し、パネルの開閉を明示
使いどころ：クリック

3本線が「×」に

See the Pen 3本線が「×」に by Web Navigator (@web-navigator) on CodePen.

2本線が「×」に

See the Pen 2本線が「×」に by Web Navigator (@web-navigator) on CodePen.

3本線が1本線に

See the Pen 3本線が1本線に by Web Navigator (@web-navigator) on CodePen.

MENUがCLOSEに

See the Pen MENUがCLOSEに by Web Navigator (@web-navigator) on CodePen.

MENUが「×」に

See the Pen MENUが「×」に by Web Navigator (@web-navigator) on CodePen.

3本線が回転して「×」に

See the Pen 3本線が回転して「×」に by Web Navigator (@web-navigator) on CodePen.

3本線が奥行きを持って回転して「×」に

See the Pen 3本線が奥行きを持って回転して「×」に by Web Navigator (@web-navigator) on CodePen.

3本線が横方向に回転して「×」に

See the Pen 3本線が横方向に回転して「×」に by Web Navigator (@web-navigator) on CodePen.

3本線がジャンプして「×」に

See the Pen 3本線がジャンプして「×」に by Web Navigator (@web-navigator) on CodePen.

次回の予定

ユーザーを的確に情報に導くテキストナビゲーションを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／

合わせて読みたい

ハンバーガーメニュー

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。