

そんな疑問にお答えします。
Web制作では必須スキルのドロワーメニュー実装。
ドロワーメニューが作れるjQueryライブラリ「drawer.js」という便利なものもありますが今回は使用せず、HTML, CSS, jQueryをゼロから書いていきます。
僕自身最初うまく書けず、思うように動いてくれないということが多々ありました。
この記事では初心者の方でもわかるようにシンプルに解説します。
まずはきちんと動かせるというところまでを目指しましょう。
目次
jQueryでのクリックイベント on(click) の使い方
ある要素をクリックしたらある処理を実行するというのは、JavaScriptでは定番のコーディングです。
jQueryでクリックイベントを設定するには、on(click)を使用します。
書き方は [要素] .on(“click”, [処理内容] ) ; となります。
$("[対象の要素]").on("click", function() {
/* 処理内容 */
});
CSSの指定の仕方と同じです。
class → .hoge
id → #hoge
ドロワーメニューの実装方法
では実際に書いていきます。
今回はグローバルナビのドロワーメニューを作ります。
前提としてjQueryの読み込みは済んでいるものとします。
まだの方はコチラ【初心者向け】jQuery本体を読み込む方法
コード
HTML
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-item" id="toggle"><a herf="#">メニュー1</a>
<ul class="toggle-list">
<li><a href="#">テキスト1</a></li>
<li><a href="#">テキスト2</a></li>
<li><a href="#">テキスト3</a></li>
</ul>
</li>
<li class="header-nav-item"><a href="#">メニュー2</a></li>
<li class="header-nav-item"><a href="#">メニュー3</a></li>
</ul>
</nav>
・3行目
・id=”toggle”と指定しています
・4行目
・toggle-listという形で、ドロワーメニューを作成しています
CSS
ul li a {
display: block;
color: #333;
padding: 8px 0;
}
#toggle {
position: relative;
}
.toggle-list {
display: none;
width: 80px;
border: 1px solid #a3a0a0;
position: absolute;
top: 40px;
left: 0;
background-color: #fafafa;
}
.header-nav-list {
display: flex;
}
.header-nav-item:not(:first-child) {
margin-left: 30px;
}
・12行目
・最初は非表示にしておきたいのでdisplayにnoneを指定します
jQuery
$(function(){
$("#toggle").on("click", function() {
$(".toggle-list").slideToggle();
});
});
・2行目
・id=”toggle”つまりメニュー1をクリックすると、イベントが発火します
・3行目
・ドロワーメニュー(toggle-list)が下りてきます
・slideToggle → 要素が表示されている時は(slideUpの演出で)隠し、隠れている時は(slideDownの演出で)表示する
まとめ:ドロワーメニューを実装できるようになろう!
初見では複雑そうに見えるドロワーメニューも、仕組みを理解すればシンプルなコードで作られているのがわかります。
ゼロからでも書けるし、ライブラリも使える。
その両方ができるようになりましょう。
投稿者 トシ
コメントを残す