2024.01.08
この記事を書いた人
だいち
今回はスマホ向けのWebサイトやアプリケーションで採用されることの多いハンバーガーメニューについて、アニメーションのパターンをいくつか紹介します。
CODE PENにまとめてるので、気になるパターンがあったら参考にしてみてください。
細かい解説が知りたい方は、先に下記記事をご覧ください！
バーガーボタン
バツ印に変化
真ん中の線はbackground-color: transparentで消しています。
上下線はそれぞれ45°ずつ傾けることでバツ印になるようにしています。
See the Pen OJMQOxM by DAICHI (@03daichi18) on CodePen.
くるっと一回転してバツ印に変化
上下の線をそれぞれ135°傾けることで上のパターンより動きを大きく見せています。
See the Pen MWKQOqV by DAICHI (@03daichi18) on CodePen.
プラスに変化
色々指定の仕方はあると思いますが、下記の方法は片方の線を180°傾けて横線に、もう片方は270°傾けて縦線にすることで＋になるように動かしています。
See the Pen PoZQOOZ by DAICHI (@03daichi18) on CodePen.
三本線が一本になる
上下の線にtransform: translateYで指定していた高さをそれぞれ0にすると真ん中に重なり一本の線となります。
See the Pen pogadqa by DAICHI (@03daichi18) on CodePen.
回転して一本になる
上下の線をtransform: rotate(180deg)で指定すると半回転します。
そうすると起点の真ん中の線に重なり一本の線になります。
See the Pen WNrMXPE by DAICHI (@03daichi18) on CodePen.
左向き矢印に変化
上下の線の幅を変え、かつ、transform: translateとrotateを同時に指定することで矢印の形に変形させています。
See the Pen BajYmEW by DAICHI (@03daichi18) on CodePen.
バツ印の周りを円で囲む
外枠btnクラスの擬似要素に対して透明な円を指定し、openクラスがついたら線に色をつけて表示させています。
See the Pen ZEQrvzq by DAICHI (@03daichi18) on CodePen.
三本線が斜めにずれる
上下の線に対してtransform: translateで横移動をさせています。
See the Pen vYLdpyX by DAICHI (@03daichi18) on CodePen.
ボタン内テキストが変化
背景色をつけ線を描写せず、擬似要素content内に「menu」と記述しています。
メニュー表示時はcontent内を「close」と書き換えています。
See the Pen xxZYLYw by DAICHI (@03daichi18) on CodePen.
ナビゲーションメニュー
基本的にはメニューの初期位置次第でどうとでもなる、というやつです。
右から表示させたければpositionでright-100％、左から表示させたければleft-100%にしておく。
jQueryのtoggleClassメソッドでクラスをつけてposition位置を0にすると、その方向に動いて表示されるように見えます。
左から表示
See the Pen wvMypdp by DAICHI (@03daichi18) on CodePen.
上から表示
See the Pen ExPQovY by DAICHI (@03daichi18) on CodePen.
全画面に表示
アニメーションをつけてませんが、これはvisibility: hiddenで初期状態を非表示にして、visibility: visibleで表示させるようにしています。
See the Pen vYLdpeg by DAICHI (@03daichi18) on CodePen.
まとめ
いかがでしたでしょうか？
ハンバーガーメニューは作成工程が若干多く、メンドウだなと感じることがありますが、実装パターンを知っておけば使い回しできます。
もし知らない方法などあればこの記事内の方法もコピペして使っちゃってください。
今回は自分がストックしていた簡単な方法だけ紹介していますが、オシャレなWebサイトを見て自分でも表現パターンを勉強するのも重要です。
また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください！
PENGIN無料コーディング課題
オススメ書籍紹介
オススメUdemy講座紹介
