【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【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">プルダウン０１</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">プルダウン０２</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">プルダウン０３</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">プルダウン０４</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サイトは、グロナビにメガメニューを使ってるデザインが多々あると思うので、そんな時、本記事で紹介した切り替わりの実装方法が役に立つと思います。
以上で解説を終わります。
