
アコーディオンメニューって、jQueryじゃなくても作れるのかなぁ?

素のJavaScriptでもたしか作れるよねっ
今回はこんな疑問にお答えします!
よくjQueryで作られるアコーディオンメニューですが、意外とJavaScriptでも簡単に作れましたので、ご紹介しようと思います。
というかjQueryの裏側は素のJavaScriptで作られているので作れないはずがないですよね。笑
では、サクッとやってみましょう!
記事でわかること
- ・JavaScriptでアコーディオンメニューを実装する方法
記事の信頼性
筆者のかがみ(@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
JavaScriptでアコーディオンメニューの作り方
実装に必要なコード
それでは、実装に必要な各種コードを先に書いていきます。
クラス名はお好みのものに変更していただいて問題ないです。
HTMLコード
<div class="contentsWrap">
<button class="btnOpen">メニューを開く</button>
<ul class="menu">
<li>メニュー01</li>
<li>メニュー02</li>
<li>メニュー03</li>
<li>メニュー04</li>
<li>メニュー05</li>
</ul>
</div>
CSSコード
.contentsWrap {
width: 200px;
}
.contentsWrap .btnOpen {
width: 100%;
height: 45px;
background: #b9e3f0;
border: none;
outline: none;
cursor: pointer;
}
.contentsWrap .menu {
overflow: hidden;
transition: all 500ms;
}
.contentsWrap .menu li:first-child {
border-top: 1px solid #a3c5d0;
}
.contentsWrap .menu li {
padding: 10px 0;
border-bottom: 1px solid #a3c5d0;
background: #eef8fb;
cursor: default;
text-align: center;
}
JavaScriptコード
const btn = document.getElementsByClassName( 'btnOpen' ).item( 0 ),
menu = document.querySelector( '.menu' ),
menuH = menu.clientHeight;
menu.style.height = '0px';
btn.addEventListener( 'click', function () {
menu.style.height === '0px' ? menu.style.height = menuH + 'px' : menu.style.height = '0px';
}, false );
動作デモ
それでは実際に動かしてみます!
下のメニューを開くボタンを押してみてください。アニメーションでなめらかに開閉できるとおもいます。Webサイトで使う場合は、メニューにそれぞれリンクを貼って使ってくださいね。
最後に:JavaScriptでアコーディオンメニューの作り方
今回は素のJavaScriptでアコーディオンメニューを実装する方法をご紹介しました。
今後もちょっと役に立つJavaScriptコードを色々と紹介していこうと思いますので、また遊びにきてくださいね!
それでは、今回はこの辺で!

いつも遊びにきてくれて、ありがとう……♪