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

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

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

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

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

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

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

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

jQueryでのクリックイベント on(click) の使い方

ある要素をクリックしたらある処理を実行するというのは、JavaScriptでは定番のコーディングです。

jQueryでクリックイベントを設定するには、on(click)を使用します。

書き方は　[要素] .on(“click”,  [処理内容] ) ;　となります。

$("[対象の要素]").on("click", function() {
/* 処理内容 */
});

ドロワーメニューの実装方法

では実際に書いていきます。

今回はグローバルナビのドロワーメニューを作ります。

こういうやつです。

前提として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>

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; 
}

jQuery

$(function(){
  $("#toggle").on("click", function() {
    $(".toggle-list").slideToggle();
  });
});

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

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

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

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

• Twitter
• Facebook

投稿者 トシ

関連記事

【disabledの扱い方】チェックを入れると有効化する送信ボタンの実装方法

【VSCode】ハイフン区切りの単語をダブルクリックで一括選択する方法

jQueryとCSSでページ読み込みのローディング画面を作る方法

【jQuery】スクロールすると上から出てくるヘッダーの実装方法

【2022年版】Google Fontsの使い方【初心者向け】

【classとidの違い】idっていつ使うものなの？