困ってる人
アコーディオンメニューって一体どうやって作るんだろう？
こんにちは、ヨロと申します。
本日は、アコーディオンメニューの作り方という事で、
今回作るのは、こんな感じのもので、ボタンをクリックする度にメニューが開閉するタイプのもの。
ただ、ボタンの見た目とかは適当なので、もしデザインの変更をしたいといった場合は、
CSS部分を編集する必要が出てくるので、今回は簡単に、どんな感じにすれば作れるか？といった簡単な説明だけ。
今回使うのは、
・HTML
・CSS
・jQuery
この３つ。
【jQuery初心者】アコーディオンメニュー：クリックでの開閉制御ボタンの作り方の基本
という事で、まずはHTML部分から。
// 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="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>次にCSS部分。
// 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部分
// jQuery部分
jQuery( '.accordion' ).on( 'click', function() {
jQuery( '.accordion ul' ).slideToggle();
});アコーディオンメニュー：それぞれのファイルの説明を簡単に解説
index.html
HTMLファイル内の、
<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
こんな感じで、同じ場所に全てのファイルを置いている。
説明が適当過ぎて申し訳ないけど、今回はこれで終わり。
コメント