ロッチくん
FAQページなどでよく見るクリックしたら、下にブロックがスライドしてコンテンツが表示させるメニューが作りたいニャ
アコーディオンメニューとは
アコーディオンメニューとは、表示されているメニューの一部をクリック（タップ）して下にある隠れたコンテンツが開閉して表示されるメニューのことです。 開閉する動きが、アコーディオンの蛇腹の動きに似ているこためアコーディオンメニューと呼ばれています。
こちらのメニューはサイトのFAQページなどでよく採用される頻出の動きになりますので、覚えておいて損はないでしょう。
アコーディオンメニューの実装方法
こちらのデモサイトのようなアコーディオンメニューを実装していきたいと思います。
まずはjQueryの読み込みをして準備を整えましょう。
HTML
HTMLの記述はこちらになります。
簡単なFAQページを想定しています。
<section id="faq">
<div class="container">
<h2>よくあるご質問</h2>
<dl>
<dt><span></span>質問１</dt>
<dd>質問１の答え</dd>
<dt><span></span>質問２</dt>
<dd>質問２の答え</dd>
<dt><span></span>質問３</dt>
<dd>質問３の答え</dd>
<dt><span></span>質問４</dt>
<dd>質問４の答え</dd>
<dt><span></span>質問５</dt>
<dd>質問５の答え</dd>
</dl>
</div>
</section>CSS
#faq {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
#faq dl dt {
padding: 3rem 0 3rem 8rem;
font-weight: bold;
background-color: #3dbaec;
color: #fff;
border-bottom: 2px solid #fff;
position: relative;
transition: opacity .3s;
}
#faq dl dt:hover {
opacity: .5;
}
#faq dl dd {
padding: 3rem 0 3rem 8rem;
background-color: #bee3f3;
position: relative;
display: none;
}
#faq dl dt span::before {
content: "Q：";
display: inline-block;
position: absolute;
left: 4rem;
}
#faq dl dd::before {
content: "A：";
display: inline-block;
position: absolute;
left: 4rem;
}
#faq dl dt::before {
content: "";
width: 22px;
height: 3px;
background-color: #fff;
display: inline-block;
position: absolute;
top: 50%;
right: 36px;
transform: translateY(-50%);
}
#faq dl dt::after {
content: "";
position: absolute;
top: 50%;
/* 36px+11px-1.5px(幅3pxの半分) */
right: 45.5px;
transform: translateY(-50%);
transition: all .3s;
/*縦線*/
width: 3px;
height: 22px;
background: #fff;
}
#faq dl dt.open::after {
top: 40%;
transform: rotate(90deg);
opacity: 0;
}JavaScript
$('#faq dl dt').on('click', function() {
$(this).toggleClass('open');
$(this).next().slideToggle();
});最後に
こちらがデモページになります。
ハンバーガーメニュー同様、JSの記載も数行ですのでまずはこれを覚えてしましましょう。
jQueryを用いた頻出UIまとめた記事はこちらから！最低限こちらを実装できればWEB制作の現場でもそんなに困らないかと思います！！
コメント