【jQuery初心者】アコーディオンメニュー：クリックでの開閉制御ボタンの作り方の基本

2019.05.23 / 更新日：2019.06.17

困ってる人

アコーディオンメニューって一体どうやって作るんだろう？

こんにちは、よろと申します。

本日は、アコーディオンメニューの作り方という事で、

今回作るのは、こんな感じのもので、ボタンをクリックする度にメニューが開閉するタイプのもの。

ただ、ボタンの見た目とかは適当なので、もしデザインの変更をしたいといった場合は、

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>

// HTML部分

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</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;
}

// 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();
});

// 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>

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

こんな感じで、同じ場所に全てのファイルを置いている。

説明が適当過ぎて申し訳ないけど、今回はこれで終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール