スマホサイトでは、以下の見本ページのように横からヌルヌルとメニューが出てくる場合があります。
見本ページ
そこで今回は左横からヌルヌルとメニューが出てくるようにするのをベースにCSSやjQueryの設置方法を説明したいと思います！
目次 [非表示]
記述すべきHTMLコード
まずドロワーメニューを表示させるために必要なHTMLコードは以下になります。
1 | <a class="menu-btn"> |
2 | <span></span> |
3 | <span></span> |
4 | <span></span> |
5 | </a> |
6 |
7 | <div class="drawer-nav"> |
8 | <ul> |
9 | <li><a href="">メニュー</a></li> |
10 | <li><a href="">メニュー</a></li> |
11 | <li><a href="">メニュー</a></li> |
12 | <li><a href="">メニュー</a></li> |
13 | <li><a href="">メニュー</a></li> |
14 | </ul> |
15 | </div> |
16 |
17 | <div class="drawer-overlay"></div> |
上記コードの1〜4行目にある
1 | <a class="menu-btn"> |
2 | <span></span> |
3 | <span></span> |
4 | <span></span> |
5 | </a> |
がハンバーガーボタン（メニューボタン）のHTMLになり、7〜17行目の
1 | <div class="drawer-nav"> |
2 | <ul> |
3 | <li><a href="">メニュー</a></li> |
4 | <li><a href="">メニュー</a></li> |
5 | <li><a href="">メニュー</a></li> |
6 | <li><a href="">メニュー</a></li> |
7 | <li><a href="">メニュー</a></li> |
8 | </ul> |
9 | </div> |
10 |
11 | <div class="drawer-overlay"></div> |
がドロワーメニュー本体のHTMLになります。
設定すべきCSS
続いて、設定すべきCSSについて解説してきます。
今回は
- ハンバーガーボタンはシンプルに3本線のもの
- ドロワーメニュー本体は背景が白色で、横幅200pxのもの
というデザインで表示させるため、以下のCSSを設定しました。
1 | .menu-btn, |
2 | .menu-btn span { |
3 | box-sizing: border-box; |
4 | display: inline-block; |
5 | transition: all .4s; |
6 | } |
7 |
8 | .menu-btn { |
9 | cursor: pointer; |
10 | display: block; |
11 | height: 36px; |
12 | margin: 20px 0 0 20px; |
13 | position: relative; |
14 | width: 40px; |
15 | } |
16 |
17 | .menu-btn span { |
18 | background: #000; |
19 | box-sizing: border-box; |
20 | left: 0; |
21 | height: 4px; |
22 | position: absolute; |
23 | width: 100%; |
24 | } |
25 |
26 | .menu-btn span:nth-of-type(1) { |
27 | top: 0; |
28 | } |
29 |
30 | .menu-btn span:nth-of-type(2) { |
31 | top: 16px; |
32 | } |
33 |
34 | .menu-btn span:nth-of-type(3) { |
35 | bottom: 0; |
36 | } |
37 |
38 | body.open { |
39 | overflow: hidden; |
40 | } |
41 |
42 | .drawer-overlay { |
43 | background: rgba(0,0,0,0.6); |
44 | box-sizing: border-box; |
45 | display: none; |
46 | height: 100%; |
47 | position: fixed; |
48 | top: 0; |
49 | width: 100%; |
50 | z-index: 9998; |
51 | } |
52 |
53 | .drawer-overlay.open { |
54 | display: block; |
55 | } |
56 |
57 | .drawer-nav { |
58 | background: #fff; |
59 | box-sizing: border-box; |
60 | left: -200px; |
61 | height: 100%; |
62 | overflow-y: scroll; |
63 | position: fixed; |
64 | top: 0; |
65 | transition: all .5s; |
66 | width: 200px; |
67 | z-index: 9999; |
68 | } |
69 |
70 | .drawer-nav.open { |
71 | left: 0; |
72 | transform: translateZ(0); |
73 | } |
74 |
75 | .drawer-nav ul { |
76 | box-sizing: border-box; |
77 | } |
78 |
79 | .drawer-nav ul li { |
80 | box-sizing: border-box; |
81 | border-bottom: 1px solid #000; |
82 | } |
83 |
84 | .drawer-nav ul li a { |
85 | box-sizing: border-box; |
86 | color: #000; |
87 | display: block; |
88 | font-size: 18px; |
89 | line-height: 28px; |
90 | padding: 5px 10px; |
91 | text-decoration: none; |
92 | } |
ハンバーガーボタンのCSSは上記見本コードの1〜36行目で設定していますが、今回はドロワーメニューが本題なため、詳しい解説については割愛させていただきます（汗）。
メニュー部分をスクロールした時にページ全体がスクロールしないようにする
まずメニュー展開時に、メニュー部分をスクロールした時にページ全体がスクロールしないようにすると挙動的にも安定するかと思います。
そのため、これは必ずCSSを設定しなきゃダメ…という訳ではないのですが、できれば
1 | body.open { |
2 | overflow: hidden; |
3 | } |
上のCSSを設定しておくと良いかな？と思います。
このCSSを設定することで、bodyにclass=”open”が追記された時にページ全体がスクロールできないようにさせることができます！
黒の半透明の要素の設定
見本ページにおいて、ドロワーメニューを開くとメニューの横に黒の半透明な要素が出てきています。
後ほど解説しますが、jQueryにてこの黒の半透明の要素をクリック（タップ）するとドロワーメニューが閉じるような設定にしますので、もしこの黒の半透明の要素を透明にしたい場合は
1 | .drawer-overlay { |
2 | background: rgba(0,0,0,0); |
3 | box-sizing: border-box; |
4 | display: none; |
5 | height: 100%; |
6 | position: fixed; |
7 | top: 0; |
8 | width: 100%; |
9 | z-index: 9998; |
10 | } |
の２行目みたいに透過度を0にすることで要素を透明にすることができます！
ちなみにデフォルトではdisplay: none;にて非表示にしており、.openが追加されることで
1 | .drawer-overlay.open { |
2 | display: block; |
3 | } |
上記のように表示されるよ設定しています。
メニュー本体のCSS
続いてメニュー本体のCSSは上記見本コードの53〜88行目にある
1 | .drawer-nav { |
2 | background: #fff; |
3 | box-sizing: border-box; |
4 | left: -200px; |
5 | height: 100%; |
6 | overflow-y: scroll; |
7 | position: fixed; |
8 | top: 0; |
9 | transition: all .5s; |
10 | width: 200px; |
11 | z-index: 9999; |
12 | } |
13 |
14 | .drawer-nav.open { |
15 | left: 0; |
16 | transform: translateZ(0); |
17 | } |
18 |
19 | .drawer-nav ul { |
20 | box-sizing: border-box; |
21 | } |
22 |
23 | .drawer-nav ul li { |
24 | box-sizing: border-box; |
25 | border-bottom: 1px solid #000; |
26 | } |
27 |
28 | .drawer-nav ul li a { |
29 | box-sizing: border-box; |
30 | color: #000; |
31 | display: block; |
32 | font-size: 18px; |
33 | line-height: 28px; |
34 | padding: 5px 10px; |
35 | text-decoration: none; |
36 | } |
にて設定しています。
メニューの背景を白、そして横幅を200pxに…というのを
1 | .drawer-nav { |
2 | background: #fff; |
3 | box-sizing: border-box; |
4 | left: -200px; |
5 | height: 100%; |
6 | overflow-y: scroll; |
7 | position: fixed; |
8 | top: 0; |
9 | transition: all .5s; |
10 | width: 200px; |
11 | z-index: 9999; |
12 | } |
にて設定していますが、上記コードの4行目にある
1 | left: -200px; |
で横幅分左側に隠れるようにしています。
そのため、横幅のサイズを変更したい場合は
width: ○○○px;
および
left: -○○○px;
のサイズを同じにして設定しましょう！
また、.openが追加された
1 | .drawer-nav.open { |
2 | left: 0; |
3 | transform: translateZ(0); |
4 | } |
で左側からヌルヌルとメニューが出てくるようなアニメーションを設定しています。
応用：
右からヌルヌル出てくるドロワーメニューを設置するには？
ちなみに今回は左からヌルヌル出てくるドロワーメニューについて解説していますが、右からヌルヌル出てくるドロワーメニューを設置したい場合は、CSSにて
1 | .drawer-nav { |
2 | background: #fff; |
3 | box-sizing: border-box; |
4 | height: 100%; |
5 | overflow-y: scroll; |
6 | position: fixed; |
7 | right: -200px; |
8 | top: 0; |
9 | transition: all .5s; |
10 | width: 200px; |
11 | z-index: 9999; |
12 | } |
13 |
14 | .drawer-nav.open { |
15 | right: 0; |
16 | transform: translateZ(0); |
17 | } |
上でハイライトで示しているように、
right: ○○○○px;
といった感じで記述してあげることで右からヌルヌル出てくるドロワーメニューを設置することが可能になります！
記述すべきjQuery
続いて記述すべきjQueryは以下になります。
1 | <script> |
2 | $(function() { |
3 | $('.menu-btn').click(function() { |
4 | $('.drawer-nav').toggleClass('open'); |
5 | $('.drawer-overlay').toggleClass('open'); |
6 | $('body').toggleClass('open'); |
7 | }); |
8 | $('.drawer-nav ul li a').click(function() { |
9 | $('.drawer-nav').removeClass('open'); |
10 | $('.drawer-overlay').removeClass('open'); |
11 | $('body').toggleClass('open'); |
12 | }); |
13 | $('.drawer-overlay').click(function() { |
14 | $('.drawer-nav').removeClass('open'); |
15 | $('.drawer-overlay').removeClass('open'); |
16 | $('body').toggleClass('open'); |
17 | }); |
18 | }); |
19 | </script> |
ハンバーガーボタンをクリック（タップ）した時の挙動の設定
上記見本コードにて、3〜7行目の
1 | $('.menu-btn').click(function() { |
2 | $('.drawer-nav').toggleClass('open'); |
3 | $('.drawer-overlay').toggleClass('open'); |
4 | $('body').toggleClass('open'); |
5 | }); |
にてハンバーガーボタンをクリック（タップ）した時にドロワーメニューがヌルヌルと出てくるよう設定しています。
また、
.drawer-nav
.drawer-overlay
body
にclass=”open”が追記されるようにも設定しており、こうすることでメニューが横からヌルヌルと出てくるようになっています！
他にも、8〜12行目にてメニューのリンクがクリック（タップ）された時の挙動、13〜17行目にて黒い半透明部分がクリック（タップ）された時の挙動をそれぞれ設定することで、ドロワーメニューのjQueryの設定は完了になります。
まとめ
急ぎ足ではありましたが、以上の設定をそれぞれで行うことで横からヌルヌル出てくるドロワーメニューを設定することができます！
メニュー幅やメニューの背景色など、細かく設定する必要がある部分は出てきますが、今回紹介した方法がお役に立てれば…と思いますo(_ _*)o
