[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()メソッドで、表示・非表示を行います(表示されているときは非表示にして、非表示のときは表示するということを自動で行うメソッドです)。
さいごに
今回はドロワーメニューの仕組みを理解するという目的で学習し、記事にしました。意味が理解できている方は、ライブラリ等を使用したほうが効率が良いと思いますので、あくまで参考としてご活用していただけると幸いです。