JS ハンバーガーメニューの実装

2020-05-25

スマホなどのページを作成した際に、メニューボタンを右上にボタンを配置して、形が変化するようなボタンを、『ハンバーガーメニュー』と呼んだりしますが、今回は、その設置と動作について、ご紹介します。
例として、下記のような動作をさせる記述になります。

まずは、ソースから


次に、クリック(または、タップ)時に動作させる動作を記述します。

jQueryでは、toggleClass();でクラスを付与するだけにして、動きについてはCSS等で設定することで、調整等もしやすくなります。


次に、CSSについて記述します。
少し長くなってしまうので、2つ分けて記載します。
まず、ベースとなる記述になります。

.menu の中に、<div>を内包しているのは、私は普段スマホの構築をする際、.menu をposition:absolute;にて位置を指定しているため、<div>を挟むことでアニメーションさせる<span>の基準の位置となっています。もちろん、その他の方法で配置している場合は、必要ありません。
また、<span> には、transition の指定をすることで、クリックした際の動きを滑らかにします。

次に、動作部分になりますが、 jQueryでクラス( active )を付与ししているので、その時の指定になります。

といったカタチで、実装することができます。

動作については、下記のサイト様でいろいろな例をまとめてくれていますので、参考になると思います。
参考URL