- ハンバーガーメニューにアコーディオンメニューを入れたい
- 自作WordPressテーマでもアコーディオンを入れたい
このような悩みに答えます。
ハンバーガーメニューとアコーディオンは、サイトを見やすくするのに効率的です。
しかし、なかなか上手く実装できなかったり、WordPress化の際につまづく方も多いかと思います。
この記事では、WordPress化も想定し、ハンバーガーメニューにアコーディオンを実装する方法を詳しく解説します。
この記事を書いた人
すずき
フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。
実装デモ
時間のない方向けに、まずは実装デモです。
HTMLとCSS、jQueryで作成しています。
ハンバーガーメニュー内のメニューをクリックすると、サブメニューが表示されます。
See the Pen Untitled by すずき (@k-suzuki3533) on CodePen.
ハンバーガーメニューの作り方は下記記事で詳しく解説しています。
具体的な実装方法
それでは具体的な作成方法を解説していきます。
以下の3ステップで作成できますので、簡単に実装できます。
- HTMLを書く
- JavaScript（jQuery）を書く
- CSSを書く
順に解説していきます。
HTMLを書く
まずはアコーディオンメニューを実装するためのHTMLを書いていきます。
<nav class="drawer_nav">
<div class="drawer_nav_inner">
<ul class="drawer_nav_list">
<li class="drawer_nav_item">
<a href="#" class="drawer_nav_link">メニュー1</a>
<ul class="drawer_nav_panel">
<li class="drawer_nav_sub-item">
<a href="#" class="drawer_nav_sub-link">サブメニュー1-1</a>
</li>
<li class="drawer_nav_sub-item">
<a href="#" class="drawer_nav_sub-link">サブメニュー1-2</a>
</li>
</ul>
</li>
<!-- 他のメニューアイテムも同様に追加 -->
</ul>
</div>
</nav><a class="drawer_nav_link">の下に、サブメニューの<ul>を入れています。
WordPressの「メニュー」出力に合わせているので、自作テーマを作っている際も使えるかと思います。
JavaScript（jQuery）を書く
次に動作を制御するためのjQueryを書いていきます。
$(document).ready(function() {
$(".drawer_nav_link").each(function() {
var $this = $(this);
var $button = $("<button>", {
type: "button",
class: "accordion-toggle",
});
if ($this.next(".drawer_nav_panel").length) {
$this.append($button);
}
});
$(".accordion-toggle").on("click", function(e) {
e.stopPropagation();
var $this = $(this);
$this.parent(".drawer_nav_link").toggleClass("active");
$this.parent().next(".drawer_nav_panel").slideToggle();
});
});まずはサブメニューを持つ.drawer_nav_linkに、新たに<button>要素を追加します。
作成した<button>がクリックされたとき、.drawer_nav_linkのactiveクラスが切り替わり、サブメニューの表示・非表示が切り替わります。
これで、サブメニューのアコーディオンを簡単に実装できます。
jQueryを使用する際は、CDNの読み込みを忘れないようにしてください。
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>ちなみに素のJavaScriptで行う場合は以下になります。
document.addEventListener("DOMContentLoaded", function() {
var drawerNavLinks = document.querySelectorAll(".drawer_nav_link");
drawerNavLinks.forEach(function(link) {
if (link.nextElementSibling && link.nextElementSibling.classList.contains("drawer_nav_panel")) {
var button = document.createElement("button");
button.type = "button";
button.className = "accordion-toggle";
link.appendChild(button);
button.addEventListener("click", function(e) {
e.stopPropagation();
link.classList.toggle("active");
var panel = link.nextElementSibling;
if (panel.style.display === "none" || panel.style.display === "") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
});
}
});
});CSSを書く
最後にCSSを書き、デザインを整えていきます。
.drawer_nav_list,
.drawer_nav_panel {
list-style: none;
padding: 0;
}
.drawer_nav_link,
.drawer_nav_sub-link {
display: block;
color: black;
text-decoration: none;
padding: 1rem;
border-bottom: solid 1px lightgray;
position: relative;
}
.accordion-toggle {
position: absolute;
top: 50%;
right: 10px;
background: transparent;
border: none;
width: 2rem;
height: 2rem;
transform: translateY(-50%);
cursor: pointer;
}
.accordion-toggle::before {
content: "▶";
display: block;
text-align: center;
}
.drawer_nav_link.active + .accordion-toggle::before {
content: "▼";
}
.drawer_nav_panel {
display: none;
}ポイントは追加した.accordion-toggleのデザインを開閉時それぞれ指定することです。
また、サブメニューには最初display: none;を指定するのを忘れないようにしましょう。
おわりに
ハンバーガーメニューにアコーディオンを追加する方法について解説しました。
ポイントは以下のとおりです。
- サブメニューに応じて開閉ボタンを追加する
- ボタンタップでアコーディオンの動作を入れる
- サブメニューは最初非表示にしておく
ハンバーガーメニューにアコーディオンがあると、メニューがすっきり見え、使いやすいサイトになります。
また今回はWordPressの自作テーマを作る際も使いまわせるようにしました。
悩んでいる人の参考になれば幸いです。