JavaScriptでアコーディオンメニューの作り方

JavaScriptでアコーディオンメニューの作り方 JavaScript
ウサギさん
アコーディオンメニューって、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コードを色々と紹介していこうと思いますので、また遊びにきてくださいね!

それでは、今回はこの辺で!

JavaScriptでスクロールした時にふわっと表示♪

JavaScriptでスクロール時にイベントを実装してみよう!【ふわっと表示】


スムーススクロールをJavaScriptで実装してみよう♪

スムースなスクロールをJavaScriptで実装してみよう♪【 ページ内リンク 】

ウサギさん
いつも遊びにきてくれて、ありがとう……♪