Date-posted: 2020/11/22
Last-Modified: 2022/06/18

[jQuery]ドロワーメニューの実装方法(ライブラリ等使用なし)

プログラミング jQuery

はじめに

HTML, CSS, jQueryでドロワーメニューの実装を行う方法を備忘録のためにまとめておりますが、参考になれば幸いです。

この記事では、ドロワーメニュー用のライブラリ等は使用はせず、HTML, CSS, jQueryをゼロから記述する方法を記載しております。

開発環境

• HTML 5
• CSS 3
• jQuery 3.1.1

コード

<header>
    <ul class="header-nav">
        <li class="header-nav-item"><a href="#">メニュー1</a></li>
        <li class="header-nav-item" id="course">メニュー2
            <ul id="toggle-list">
                <li><a href="#">メニュー2-1</a></li>
                <li><a href="#">メニュー2-2</a></li>
                <li><a href="#">メニュー2-3</a></li>
            </ul>
        </li>
        <li class="header-nav-item"><a href="#">メニュー3</a></li>
    </ul>
</header>

#course {
  position: relative;
}

#toggle-list {
  display: none;
  border: 1px solid;
  position: absolute;
  width: 100px;
  background-color: #fafafa;
}

$(function() {
  $('#course').on('click', function() {
    $(this).children().slideToggle();
  });
});

コードの説明

index.html

• 4行目
• メニュー2にドロワーメニューを採用しています。

• 5行目
• toggle-listという形で、ドロワーメニューを作成しています。

style.css

• 2行目
• メニュー2をドロワーメニューの表示する場所の基準として設定しております。

• 5〜10行目
• display: none; で最初は非表示の状態にしています。
• position: absolute; でメニュー2の下にドロワーメニューが表示されるようにしています。

drawer.js

• 2行目
• メニュー2をクリックすると、イベントが発火するようにしています。

• 3行目
• thisは、メニュー2を指しています。
• childrenは、メニュー2の子要素(ドロワーメニューであるul)を指しており、slideToggle()メソッドで、表示・非表示を行います(表示されているときは非表示にして、非表示のときは表示するということを自動で行うメソッドです)。

さいごに

今回はドロワーメニューの仕組みを理解するという目的で学習し、記事にしました。意味が理解できている方は、ライブラリ等を使用したほうが効率が良いと思いますので、あくまで参考としてご活用していただけると幸いです。

• facebook
• Tweet