2022/1/17 （更新日: 2022/8/18）

【jQuery】ドロワーメニューの実装方法【かんたん解説】

Coding

ドロワーメニューってどうやるの？

そんな疑問にお答えします。

Web制作では必須スキルのドロワーメニュー実装。

ドロワーメニューが作れるjQueryライブラリ「drawer.js」という便利なものもありますが今回は使用せず、HTML, CSS, jQueryをゼロから書いていきます。

僕自身最初うまく書けず、思うように動いてくれないということが多々ありました。

この記事では初心者の方でもわかるようにシンプルに解説します。

まずはきちんと動かせるというところまでを目指しましょう。

1 jQueryでのクリックイベント on(click) の使い方
2 ドロワーメニューの実装方法
- 2.1 コード
3 まとめ：ドロワーメニューを実装できるようになろう！

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の演出で）表示する

まとめ：ドロワーメニューを実装できるようになろう！

ドロワーメニューを実装

初見では複雑そうに見えるドロワーメニューも、仕組みを理解すればシンプルなコードで作られているのがわかります。

ゼロからでも書けるし、ライブラリも使える。

その両方ができるようになりましょう。

コメントを残すコメントをキャンセル

投稿者トシ