目次
はじめに
今回はアコーディオンメニューやハンガーガーメニューで使用するjQueryのslideToggle()をcssで実装してみたのでご紹介します。
アコーディオンメニューサンプルソースコード
htmlと共通のcssを先に紹介します。
アコーディオンメニューサンプルhtml
PR
<div class="accordion">
<ul class="accordion__list">
<li class="accordion__item">
<a href="">
メニュー1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3
</a>
<span class="toggle-btn"></span>
<ul class="level02">
<li class="accordion__item">
<a href="">
メニュー3-1
</a>
<span class="toggle-btn"></span>
<ul class="level03">
<li class="accordion__item">
<a href="">
メニュー3-1-1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-3
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-4
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-5
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="accordion__item">
<a href="">
メニュー4
</a>
<span class="toggle-btn"></span>
<ul class="level02">
<li class="accordion__item">
<a href="">
メニュー4-1
</a>
<span class="toggle-btn"></span>
<ul class="level03">
<li class="accordion__item">
<a href="">
メニュー4-1-1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-1-2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-1-3
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-1-4
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-1-5
</a>
</li>
</ul>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2
</a>
<span class="toggle-btn"></span>
<ul class="level03">
<li class="accordion__item">
<a href="">
メニュー4-2-1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-3
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-4
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-5
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
アコーディオンメニュー共通css
.accordion__list > li > a {
padding: 10px;
}
.accordion__list a {
padding: 10px 0;
}
.accordion__list a {
display: block;
}
.accordion__list p {
position: relative;
}
.accordion__list > .accordion__item {
border-bottom: 1px solid currentColor;
}
.accordion__item {
position: relative;
}
.level02 {
border-top: 1px solid currentColor;
transition: all 0.3s;
}
.toggle-btn {
width: 30px;
height: 30px;
position: absolute;
top: 7px;
right: 10px;
transition: 0.3s all;
cursor: pointer;
}
.toggle-btn::before,
.toggle-btn::after {
content: "";
width: 16px;
height: 2px;
position: absolute;
top: 14px;
left: 7px;
background-color: #333;
border-radius: 5px;
transition: 0.3s all;
}
.toggle-btn::after {
transform: rotate(90deg);
}
.toggle-btn.open::after {
transform: rotate(0deg);
}slideToggle()で実装をした場合
slideToggle()で実装をした場合のアコーディオンの動き
slideToggle()を使用した場合のアコーディオンの動きをご確認ください。
slideToggle()で実装をした場合のcss
.level02,
.level03 {
display: none;
padding-left: 30px;
}
.level02.open,
.level03.open {
opacity: 1;
visibility: visible;
}slideToggle()で実装を場合のJavaScript
jQuery(".toggle-btn").on("click", function() {
jQuery(this).toggleClass("open");
const siblingUl = jQuery(this).next("ul");
if (siblingUl.length) {
siblingUl.slideToggle();
}
});css実装をした場合
cssで実装をした場合のアコーディオンの動き
cssで実装をした場合のcss
.level02,
.level03 {
height: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
padding-left: 30px;
}
.level02.open,
.level03.open {
height: 100%;
opacity: 1;
visibility: visible;
}cssで実装をした場合のJavaScript
純粋なJavaScript
document.querySelectorAll(".toggle-btn").forEach(function(btn) {
btn.addEventListener("click", function() {
this.classList.toggle("open");
const siblingUl = this.nextElementSibling;
if (siblingUl) {
siblingUl.classList.toggle("open");
}
});
});jQueryの場合
jQuery(".toggle-btn").on("click", function() {
jQuery(this).toggleClass("open");
const siblingUl = jQuery(this).next("ul");
if (siblingUl.length) {
siblingUl.toggleClass("open");
}
});他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
