☰
ぐっちーブログ

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

プログラミング jQuery

javascript-drawer

はじめに

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()メソッドで、表示・非表示を行います(表示されているときは非表示にして、非表示のときは表示するということを自動で行うメソッドです)。

さいごに

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

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