ハンバーガーメニューの実装
2020-05-25
スマホなどのページを作成した際に、メニューボタンを右上にボタンを配置して、形が変化するようなボタンを、『ハンバーガーメニュー』と呼んだりしますが、今回は、その設置と動作について、ご紹介します。
例として、下記のような動作をさせる記述になります。
まずは、ソースから
|
1 2 3 4 5 6 7 |
<div class="menu"> <div> <span></span> <span></span> <span></span> </div> </div> |
次に、クリック（または、タップ）時に動作させる動作を記述します。
|
1 2 3 |
$('.menu').on('click', function(){ $(this).toggleClass('active'); }); |
jQueryでは、toggleClass();でクラスを付与するだけにして、動きについてはCSS等で設定することで、調整等もしやすくなります。
次に、CSSについて記述します。
少し長くなってしまうので、２つ分けて記載します。
まず、ベースとなる記述になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.menu { display: block; width: 50px; height: 50px; position: absolute; top: 20px; right: 20px; } .menu div{ width: 100%; height: 100%; position: relative; } .menu div span{ display: block; width: 100%; height: 2px; background: #000; position: absolute; left: 0; transition: 0.4s linear; opacity: 1; } .menu div span:nth-of-type(1){ top: 10px; } .menu div span:nth-of-type(2){ top: 20px; } .menu div span:nth-of-type(3){ top: 30px; } |
.menu の中に、<div>を内包しているのは、私は普段スマホの構築をする際、.menu をposition:absolute;にて位置を指定しているため、<div>を挟むことでアニメーションさせる<span>の基準の位置となっています。もちろん、その他の方法で配置している場合は、必要ありません。
また、<span> には、transition の指定をすることで、クリックした際の動きを滑らかにします。
次に、動作部分になりますが、 jQueryでクラス（ active ）を付与ししているので、その時の指定になります。
|
1 2 3 4 5 6 7 8 9 10 |
.menu.active div span:nth-of-type(1){ transform: translateY(15px) rotate(315deg); } .menu.active div span:nth-of-type(2){ transform: translateX(10px); opacity: 0; } .menu.active div span:nth-of-type(3){ transform: translateY(-15px) rotate(-315deg); } |
といったカタチで、実装することができます。
動作については、下記のサイト様でいろいろな例をまとめてくれていますので、参考になると思います。
参考URL