アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、
クリックすると隠れていた部分が開閉するタイプのメニューです。
小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。
コーディングをしていると、Webサイトのどこかに必ずと言っていいほど使われているのですが、
アコーディオンにも色々なパターンがあり、慣れないうちは作るのに手間取ってしまいがちです。
そこで今回のブログでは、よく使われるアコーディオンメニューをまとめてみました。
デモページもあるのでぜひ参考にしてみてください！
目次
デモページ
今回紹介するすべてのアコーディオンメニューをまとめたデモページはこちらになります。
クリックして動きを確認しながらコードと見比べてみてください！
アコーディオンメニューサンプル
開くと”くの字矢印”が上下に反転するアコーディオン
ソースの表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <button type="button" class="menu-btn"> <span class="inn"></span> </button> <nav class="menu"> <ul> <li><a href="">項目1</a></li> <li><a href="">項目2</a></li> <li><a href="">項目3</a></li> <li><a href="">項目4</a></li> <li><a href="">項目5</a></li> </ul> </nav> |
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 70 | .menu-btn { width: 60px; height: 60px; position: absolute; top: 1px; right: 1px; background-color: #fff; outline: initial; &:focus-visible { box-shadow: 0 0 0 2px blue; } .inn { position: relative; width: 100%; height: 100%; display: block; &:before { position: absolute; content: ""; top: 40%; left: 50%; width: 15px; height: 15px; transform: translate(-50%, -40%) rotate(135deg); border-top: 1px solid #000; border-right: 1px solid #000; transition: 0.3s ease; } } } .menu-btn.is-open { .inn { &:before { top: 60%; transform: translate(-50%, -60%) rotate(-45deg); } } } .menu { position: absolute; top: 60px; width: 100%; background-color: #fff; opacity: 0; transition: .3s ease-in-out; pointer-events: none; transform: translateY(-30px); ul { border-bottom: 1px solid #000; li { height: 60px; border-top: 1px solid #000; display: flex; align-items: center; justify-content: center; } } } .menu.is-open { opacity: 1; transform: translateY(0); } |
1 2 3 4 5 6 | $('.menu-btn').click(function(){ $(this).toggleClass('is-open'); $(this).siblings('.menu').toggleClass('is-open'); }); |
ボタンの中のinnクラスの疑似要素として”くの字矢印”を作っています。
また、メニューは最初はopacity:0;で透明にして見えなくしています。
ボタンがクリックされたらjQueryでボタン自身とメニューにis-openクラスを追加し、
is-openクラスのCSSでボタンの反転とメニューが上から現れる動きをつけています。
開く前は3本線、開いたら×ボタンになるアコーディオン
ソースの表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <button type="button" class="menu-btn"> <span class="inn"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </span> </button> <nav class="menu"> <ul> <li><a href="">項目1</a></li> <li><a href="">項目2</a></li> <li><a href="">項目3</a></li> <li><a href="">項目4</a></li> <li><a href="">項目5</a></li> </ul> </nav> |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | .menu-btn { width: 60px; height: 60px; position: absolute; top: 1px; right: 1px; background-color: #fff; outline: initial; &:focus-visible { box-shadow: 0 0 0 2px blue; } .inn { margin: auto; position: absolute; width: 30px; height: 30px; top: 0; bottom: 0; right: 0; left: 0; .line { position: absolute; display: inline-block; background-color: #000; height: 1px; left: 0; width: 100%; transition: 0.3s; &:nth-of-type(1) { top: 0; } &:nth-of-type(2) { top: 48%; } &:nth-of-type(3) { bottom: 0; } } } } .menu-btn.is-open { .inn { .line { &:nth-of-type(1) { top: 45%; transform: rotate(45deg); } &:nth-of-type(2) { opacity: 0; } &:nth-of-type(3) { top: 45%; transform: rotate(-45deg); bottom: auto; } } } } .menu { position: absolute; top: 60px; width: 100%; background-color: #fff; opacity: 0; transition: .3s ease-in-out; pointer-events: none; transform: translateY(-30px); ul { border-bottom: 1px solid #000; li { height: 60px; border-top: 1px solid #000; display: flex; align-items: center; justify-content: center; } } } .menu.is-open { opacity: 1; transform: translateY(0); } |
1 2 3 4 5 6 | $('.menu-btn').click(function(){ $(this).toggleClass('is-open'); $(this).siblings('.menu').toggleClass('is-open'); }); |
jQueryは1つ目と同じです。
こちらはクリックされたら3本線の上と下の2本が移動して×になり、
真ん中の１本はopacity:0;で消える仕組みです。
開く前は＋ボタン、開いたら－ボタンになるアコーディオン
ソースの表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <button type="button" class="menu-btn"> <span class="inn"> <span class="line"></span> <span class="line"></span> </span> </button> <nav class="menu"> <ul> <li><a href="">項目1</a></li> <li><a href="">項目2</a></li> <li><a href="">項目3</a></li> <li><a href="">項目4</a></li> <li><a href="">項目5</a></li> </ul> </nav> |
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 70 71 72 73 74 75 76 77 78 79 80 81 | .menu-btn { width: 60px; height: 60px; position: absolute; top: 1px; right: 1px; background-color: #fff; outline: initial; &:focus-visible { box-shadow: 0 0 0 2px blue; } .inn { margin: auto; position: absolute; width: 30px; height: 30px; top: 0; bottom: 0; right: 0; left: 0; .line { position: absolute; display: inline-block; background-color: #000; height: 2px; left: 0; width: 100%; transition: 0.3s; &:nth-of-type(1) { top: 50%; transform: rotate(90deg); } &:nth-of-type(2) { top: 50%; } } } } .menu-btn.is-open { .inn { .line { &:nth-of-type(1) { opacity: 0; } } } } .menu { position: absolute; top: 60px; width: 100%; background-color: #fff; opacity: 0; transition: .3s ease-in-out; pointer-events: none; transform: translateY(-30px); ul { border-bottom: 1px solid #000; li { height: 60px; border-top: 1px solid #000; display: flex; align-items: center; justify-content: center; } } } .menu.is-open { opacity: 1; transform: translateY(0); } |
1 2 3 4 5 6 | $('.menu-btn').click(function(){ $(this).toggleClass('is-open'); $(this).siblings('.menu').toggleClass('is-open'); }); |
こちらもjQueryは1つ目と同じで、
クリックされたら縦の線が消えて＋が－になる仕組みです。
項目全体がボタンになっているアコーディオン
ソースの表示
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 | <nav class="menu"> <div class="menu-item"> <div class="menu-item-btn">項目1</div> <ul> <li>項目1-1</li> <li>項目1-2</li> <li>項目1-3</li> </ul> </div> <div class="menu-item"> <div class="menu-item-btn">項目2</div> <ul> <li>項目2-1</li> <li>項目2-2</li> <li>項目2-3</li> </ul> </div> <div class="menu-item"> <div class="menu-item-btn">項目3</div> <ul> <li>項目3-1</li> <li>項目3-2</li> <li>項目3-3</li> </ul> </div> </nav> |
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 | .menu { width: 100%; border-bottom: 1px solid #000; .menu-item { .menu-item-btn { height: 60px; border-top: 1px solid #000; display: flex; align-items: center; justify-content: center; background-color: palegoldenrod; cursor: pointer; } ul { display: none; li { height: 60px; border-top: 1px solid #000; display: flex; align-items: center; justify-content: center; background-color: beige; } } } } |
1 2 3 4 5 | $('.menu-item-btn').click(function(){ $(this).siblings('ul').stop().slideToggle(); }); |
項目のどこをクリックしてもアコーディオンが開くタイプです。
jQuery3行目のstop()関数は、ユーザーが項目を素早く連打した時にアコーディオンが何度も開閉してしまわないようにするために設定しています。
1つ開くと他の項目が閉じるアコーディオン
ソースの表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="qa"> <div class="q">Q1.○○？</div> <div class="a">A1.✕✕！</div> </div> <div class="qa"> <div class="q">Q2.○○？</div> <div class="a">A2.✕✕！</div> </div> <div class="qa"> <div class="q">Q3.○○？</div> <div class="a">A3.✕✕！</div> </div> <div class="qa"> <div class="q">Q4.○○？</div> <div class="a">A4.✕✕！</div> </div> <div class="qa"> <div class="q">Q5.○○？</div> <div class="a">A5.✕✕！</div> </div> |
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 | .qa { font-size: 20px; .q { background-color: mediumseagreen; height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: greenyellow; height: 60px; display: none; padding: 15px; } } |
1 2 3 4 5 6 7 8 | $('.q').click(function(){ $(this).siblings('.a').stop().slideToggle(); $('.q').not($(this)).siblings('.a').slideUp(); $(this).toggleClass('active'); $('.q').not($(this)).removeClass('active'); }); |
こちらはWebサイトの「よくある質問」の一問一答などでよく使われるタイプのアコーディオンメニューです。
jQueryの4行目で「クリックされていない項目を閉じる」操作をして、1つしか開かないようにしています。
まとめ
いかがだったでしょうか？
慣れないうちは、アコーディオンメニューはCSSのアニメーションやjQueryが関わってくるから難しそう・・・と思ってしまうかもしれませんが、
いくつかのパターンさえ押さえていれば、時間をかけずに簡単に作れるようになると思います。
だいたいどのWebサイトでもアコーディオンメニューはスマホのヘッダーなどで使われています。
色々なサイトをスマホサイズで見てみるのも勉強になっていいのではないでしょうか。
最後まで読んでいただきありがとうございました！
