【jQuery】アコーディオンメニュー 上下にスライドして開閉するメニュー
最近Webサイト制作をしているとほぼどのサイトでも必ずと言っていいほど、クリックで隠れていたメニューやコンテンツが表示される機能を実装することが多いです。
アコーディオンメニューとかハンバーガーメニューとかスライドメニューとかスライドトグルとかあの上からスッと出てくるあれとか呼ばれる機能ですね。
jQueryを使えば実装自体はとてもシンプルなので簡単なデモを作ってみました。
目次
アコーディオンメニュー
toggleメソッドを使えば簡単に実装できます。
jQueryライブラリの読み込み
jQueryを利用するのでライブラリを読み込みます。
サーバーにアップしたファイルを読みに行く場合
|
1 |
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> |
Google CDNを利用する場合
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="toggle_wrap"> <div class="toggle_switch"> <p>クリックでオープン</p> </div> <div class="toggle_contents"> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> </div> </div> |
「.toggle_wrap」はスタイルを整えるのに使っているだけなので、動作上あってもなくても問題ありません。
「.toggle_switch」は隠れているコンテンツの表示・非表示を切り替えるトグルスイッチになります。
「.toggle_contents」は表示・非表示が切り替わるコンテンツです。
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 33 34 35 36 |
.toggle_wrap:last-of-type { border-bottom: 1px solid gray; } .toggle_switch { position: relative; cursor: pointer; padding: 5px 10px; border-top: 1px solid gray; } .toggle_switch.open { border-bottom: 1px solid gray; } .toggle_switch:hover { background-color: #eee; } .toggle_switch::after { content: ""; display: inline-block; width: 18px; height: 11px; background: url(../img/arrow_down.svg) no-repeat center center; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; transition: transform .2s; } .toggle_switch.open::after { transform: rotateZ(180deg); top: 46%; } .toggle_contents { display: none; padding: 5px 10px; } |
16行目：「.toggle_switch::after」でopen/closeの三角矢印アイコンを擬似要素として表示させています。
29行目：「.toggle_switch.open::after」でopenの時はアイコンを反転させます。
33行目：「.toggle_contents」最初は隠れている要素なので「display: none;」にしておきます。
javascript
|
1 2 3 4 |
$('.toggle_switch').on('click',function(){ $(this).toggleClass('open'); $(this).next('.toggle_contents').slideToggle(); }); |
1行目：「.toggle_switch」がクリックさるたびに以下の内容を実行します。
2行目：toggleClass()で、指定したクラス「.open」の追加・削除の切り替え。
3行目：slideToggle()で、クリックされた「.toggle_switch」の次の要素である「.toggle_contents」のオープン・クローズの切り替え。
デモ
実際の動きはこちらになります。
See the Pen Toggle by Creative Next (@Creative_Next) on CodePen.
ハンバーガーメニュー
よくある固定位置で画面に追従するハンバーガーメニューも簡単に実装できます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<header> <div class="menu-trigger" href="#"> <span></span> <span></span> <span></span> </div> </header> <nav> <ul> <li>TOP</li> <li>MENU</li> <li>MENU</li> <li>MENU</li> </ul> </nav> <main> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> </main> |
「.menu-trigger」はメニューボタンです。
メニューが閉じている時は三本線、開いている時はバツ印になるよくあるアレですね。
「nav」はスライドで表示・非表示が切り替わるメニュー（グロナビ）です。
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
header { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; height: 60px; padding: 0 20px; position: fixed; top: 0; left: 0; z-index: 2; } .menu-trigger { display: inline-block; position: relative; width: 36px; height: 28px; vertical-align: middle; cursor: pointer; } .menu-trigger span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 4px; background-color: #000; transition: all .5s .2s; } .menu-trigger.active span { background-color: #fff; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); } .menu-trigger span:nth-of-type(2) { top: 12px; } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); } nav { width: 100%; background-color: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; display: none; position: fixed; top: 0; left: 0; z-index: 1; } nav ul { padding: 20px 0; } nav ul li { padding: 5px 0; } |
1行目：メニューボタンを含むヘッダー全体が固定で追従する想定です。
22行目～52行目：メニュー（グロナビ）の開閉に伴い、メニューボタンのアイコンが切り替わります。
58行目：「display: none;」でメニュー（グロナビ）は最初は隠れている状態にしておきます。
javascript
|
1 2 3 4 5 6 7 8 9 |
$('.menu-trigger').on('click',function(){ if($(this).hasClass('active')){ $(this).removeClass('active'); $('nav').slideUp(); } else { $(this).addClass('active'); $('nav').slideDown(); } }); |
3・6行目：今回はtoggleClass()を使わず、addClass/removeClassでクラス「.active」の追加・削除を行っています。
4・7行目：今回はslideToggle()を使わず、slideUp/slideDownでメニュー（グロナビ）のオープン・クローズを行っています。
デモ
実際の動きはこちらになります。
デモ
See the Pen Accordion Menu by Creative Next (@Creative_Next) on CodePen.
まとめ
スライドでのコンテンツの表示・非表示の切り替えは、特にレスポンシブ等のサイトで本当によく使うので、今後の作業でサックと実装できるように基本的なテンプレートとしてまとめてみました。
by N
