こんにちは、ikuxxと申します。
本日は、アコーディオンメニューの作り方という事で、
今回作るのは、こんな感じのもので、ボタンをクリックする度にメニューが開閉するタイプのもの。
ただ、ボタンの見た目とかは適当なので、もしデザインの変更をしたいといった場合は、
CSS部分を編集する必要が出てくるので、今回は簡単に、どんな感じにすれば作れるか?といった簡単な説明だけ。
今回使うのは、
・HTML
・CSS
・jQuery
この3つ。
【jQuery初心者】アコーディオンメニュー:クリックでの開閉制御ボタンの作り方の基本
という事で、まずはHTML部分から。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div class="accordion"> <div class="accordion-btn">メニュー</div> <!-- ボタン --> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> <script src="script.js"></script> </body> </html> |
次にCSS部分。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// CSS部分 .accordion { /* ここで全体的なメニューのサイズ */ width: 120px; height: auto; text-align: center; cursor: pointer; } .accordion-btn { /* ボタン */ display: inline-block; background-color: #000; color: #fff; padding: 5px 25px; } ul, li, a { /* ボタンの中身 */ margin: 0; padding: 0; list-style: none; text-decoration: none; color: #333; } li { padding: 8px 0px 5px 0px; border-bottom: 1px solid gray; } .accordion ul { /* ここで最初はボタンの中身を隠しておく */ display: none; } |
そして最後に、jQuery部分
1 2 3 4 5 |
// jQuery部分 jQuery( '.accordion' ).on( 'click', function() { jQuery( '.accordion ul' ).slideToggle(); }); |
アコーディオンメニュー:それぞれのファイルの説明を簡単に解説
index.html
HTMLファイル内の、
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
ここで、jQueryを読み込む設定に。
style.css
CSS部分に関しては、
.accordion {} ここで全体的なメニューのサイズ
.accordion-btn {} ここでボタンの色や形など
ul, li, a {} ここでメニューを開いた時のボタンの中身
.accordion ul {} の display: none; にする事で、最初はボタンを隠す設定に
そして、ボタンの開閉の処理の内容は「script.js」の中に書いていく。
.accordionをクリックすると、
.accordionのulが、.slideToggle(スライドで開閉されるという意味合い)
今回、ファイルの階層は、
・index.html
・style.css
・script.js
こんな感じで、同じ場所に全てのファイルを置いている。
説明が適当過ぎて申し訳ないけど、今回はこれで終わり。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
アコーディオンメニューって一体どうやって作るんだろう?