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

スポンサーリンク
man

困ってる人

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


こんにちは、ヨロと申します。

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

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


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

CSS部分を編集する必要が出てくるので、今回は簡単に、どんな感じにすれば作れるか?といった簡単な説明だけ。

今回使うのは、

・HTML
・CSS
・jQuery

この3つ。

スポンサーリンク

【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="#">メニュー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部分。

// 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をクリックすると、

.accordionulが、.slideToggle(スライドで開閉されるという意味合い)


今回、ファイルの階層は、

・index.html
・style.css
・script.js

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

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

コメント

タイトルとURLをコピーしました