Written by Kasumi

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

こんにちは。カスミです。

さて、以下のようなお悩みをお持ちでしょうか?

グロナビで、クリックしたらアコーディオン形式で出るプルダウンメニューを複数実装したが、その中の一つのプルダウンがアクティブの時、他で開いていたプルダウンは閉じたい。

このような悩みを解決致します。

本記事では、jqueryを使って、複数あるプルダウンメニューで切り替えを実装する方法について、解説します。

※本記事ではjqueryを使うので、事前にjqueryのライブラリをhead内に読み込んでください。

実装サンプル

See the Pen rNMZJzP by Kohei (@kouk05) on CodePen.dark

実装サンプルです。

プルダウンメニューがあるグロナビを想定して作りました。

グロナビのリストを順にクリックしてもらうと、プルダウンメニューが切り替わっているのがわかります。

詳細は次章より説明致します。

html、cssのサンプルコード

html

<ul class="nav">
  <li class="nav-li">
    <span class="nav-li-btn">プルダウン01</span>
    <ul class="pulldownmenu">
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
    </ul>
  </li>
    <li class="nav-li">
    <span class="nav-li-btn">プルダウン02</span>
    <ul class="pulldownmenu">
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
    </ul>
  </li>
    <li class="nav-li">
    <span class="nav-li-btn">プルダウン03</span>
    <ul class="pulldownmenu">
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
    </ul>
  </li>
    <li class="nav-li">
    <span class="nav-li-btn">プルダウン04</span>
    <ul class="pulldownmenu">
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
    </ul>
  </li>
</ul>

htmlのサンプルコードです。

上記で無くても問題ないですが、プルダウンメニューの要素はクリック動作させる要素と兄弟要素にし、親要素で囲ってください。

CSS

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.nav {
  padding: 10px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  background: #000;
}
.nav-li {
  text-align: center;
  flex: 0 0 25%;
  color: #fff;
  position: relative;
}
.pulldownmenu {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
background: #eee;
  padding: 15px;
  width: 100%;
}
.pulldownmenu li {
  color: #000;
}
.nav-li-btn {
  cursor: pointer;
  display: block;
}

CSSのサンプルコードです。

プルダウンメニューは「display: none;」で非表示にしときましょう。

jqueyでプルダウン切り替わりの実装

  $(function () {
    $('.nav-li-btn').click(function () {
      $(this).siblings('.pulldownmenu').slideToggle();
      $('.nav-li-btn').not($(this)).siblings('.pulldownmenu').slideUp();
      });
  });

上記コードがjqueryを使ったプルダウンメニュー切り替わりのサンプルコードです。

セレクタ部分は任意のクラス名に変更してください。上記はサンプルです。

「slideToggle()」までは、切り替わり無しのプルダウン処理になります。

重要なのが「.not($(this))」を使っている部分です。

これによりクリックした要素以外は「slideUp()」させる、つまりプルダウンを閉じる処理をしています。

以上で、実装完了です。

まとめ

最近のwebサイトは、グロナビにメガメニューを使ってるデザインが多々あると思うので、そんな時、本記事で紹介した切り替わりの実装方法が役に立つと思います。

以上で解説を終わります。

目次

関連記事

jQuery

【jQuery】背景に波紋アニメーションを実装する方法

2023.08.28
959
jQuery

jQueryを使ってJSONデータを取得、配列にして値を出力する方法【Ajaxで解決!】

更新日:2022.09.09
15121
jQuery WordPress

【簡単に代替】Contact Form 7 Datepickerが使えなくなった?jQuery UIを使って日付選択を実装しよう

更新日:2022.09.09
7514
jQuery

bxsliderを使って左右チラ見せのカルーセルスライダーを実装する方法

更新日:2022.09.09
4177