ドロワーメニューの実装方法【jQuery】
こんにちは！スズキです。
今回はjQueryでのドロワーメニューの実装方法を紹介します。
ドロワーメニューとは、webサイトで使われる、ボタンをクリックするとメニューが表示される仕組みのことです。
jQueryを使えば、わずかなコードで簡単に実装できます。
初心者でも簡単なので、ぜひ試してみてください。
記事の内容
- HTML
- CSS
- jQuery
スポンサードサーチ
HTML
<!-- CSS読み込み -->
<link rel="stylesheet" href="./style.css">
<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="./practice.js"></script>
まずはheadタグ内でCSSとjQueryを読み込みます。
jQueryはjQueryライブラリ、jsファイルの順で読み込みましょう。
<div>
<a href="#" class="drawer">ドロワーデモ</a>
<ul class="drawer-list">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>
次にbodyタグ内で、「クリックするもの（ここではaタグ）」と「表示するもの（ここではulタグ）」を記述します。
ここは適宜変更してください。
CSS
.drawer-list {
display:none;
font-size: 15px;
}
次にCSSです。
ここも適宜自由に変更してください。
注意点として、「表示するもの」はdisplayにnoneを指定しておきましょう。
クリックされるまでは非表示にしておくためです。
スポンサードサーチ
jQuery
$ (function() {
$(".drawer").click (function() {
$(".drawer-list").slideToggle();
});
});
最後にjQueryです。
クリックされたときに、slideToggleが機能するため、ドロワーメニューを表示できます。
まとめ
いかがでしたか。
jQueryを使えば、わずかなコードでドロワーメニューを実装できます。
ぜひ試してみてください。
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら