【jQuery】ドロップダウンメニューを簡単に実装する【2つ】
この記事では、jQueryのslideUp/slideDownとaddClass/removeClassを使って、ドロップダウンメニューを簡単に実装する方法を2つご紹介します。
今回は、jQueryのslideUp/slideDownとaddClass/removeClassを使って、ドロップダウンメニューを簡単に実装する方法を2つご紹介します。
jQueryのslideUp/slideDownを使う
jQueryのslideUp/slideDownを使ったドロップダウンメニューの実装がこちら。
HTML
クラス「.menuSub」の部分が、マウスホバーした時に表示される内容です。
<div>
<ul class="menu">
<li>menu1</li>
<li>
menu2
<ul class="menuSub">
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
</ul>
</li>
<li>
menu3
<ul class="menuSub">
<li><a href="#">menu3-1</a></li>
<li><a href="#">menu3-2</a></li>
<li><a href="#">menu3-3</a></li>
</ul>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
CSS
クラス「.menuSub」に「display: none;」を設定して非表示にしておきます。表示・非表示の切り替えは、jQueryの処理によって切り替わります。
その他のCSSは、見た目を整えるための設定です。
.menu {
display: flex;
justify-content: flex-start;
list-style-type: none;
color: #fff;
padding: 0;
}
.menu li {
position: relative;
width: 100px;
margin-left: 1px;
padding: 5px;
background: #444444;
}
.menuSub {
position: absolute;
margin-left: -6px;
padding: 0;
display: none;
}
.menuSub li a {
padding: 5px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -5px;
display: block;
color: #fff;
text-decoration: none;
}
.menuSub li a:hover {
background: #FFCA7B;
}
jQuery/JS
「.menu li」をマウスホバーすると、slideDown()で「.menuSub」が表示されます。マウスホバーが外れると、slideUp()で「.menuSub」が非表示になります。
「:not(:animated)」の記述は必須です。この記述をしておくことで、アニメーション実行中にマウスホバーされても処理が追加されないようになります。
$(function() {
$("ul.menu li").hover(
function() {
$(".menuSub:not(:animated)", this).slideDown();
},
function() {
$(".menuSub", this).slideUp();
}
);
});
jQueryのaddClass/removeClassを使う
jQueryのaddClass/removeClassを使ったドロップダウンメニューの実装はこちら。
HTML
クラス「.menuSub」の部分が、マウスホバーした時に表示される内容です。
<div>
<ul class="menu">
<li>menu1</li>
<li>
menu2
<ul class="menuSub">
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
</ul>
</li>
<li>
menu3
<ul class="menuSub">
<li><a href="#">menu3-1</a></li>
<li><a href="#">menu3-2</a></li>
<li><a href="#">menu3-3</a></li>
</ul>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
CSS
ポイントが2つあります。
クラス「.menuSub」に「display: none;」を設定して非表示にしておく
クラス「.menuSub.open」に「display: block;」を設定して、ホバー時に表示される
②の「.menuSub.open」は、マウスホバー時に、jQueryで「.menuSub」に「.open」を追加する処理を実装します。
その他のCSSは、見た目を整えるための設定です。
.menu {
display: flex;
justify-content: flex-start;
list-style-type: none;
color: #fff;
padding: 0;
}
.menu li {
position: relative;
width: 100px;
margin-left: 1px;
padding: 5px;
background: #444444;
}
.menuSub {
position: absolute;
margin-left: -6px;
padding: 0;
display: none;
}
/*.openが付与された時、表示の設定*/
.menuSub.open {
display: block;
}
.menuSub li a {
padding: 5px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -5px;
display: block;
color: #fff;
text-decoration: none;
}
.menuSub li a:hover {
background: #FFCA7B;
}
jQuery/JS
マウスホバーされると、addClass()で「.menuSub」に「.open」を追加します。CSSの設定で「.menuSub.open」を表示する設定を記述しているので、メニューが表示される仕組みになってます。
マウスホバーが外れると、removeClass()で「.open」を削除します。CSSの設定で「.menuSub」を非表示にする設定を記述しているので、メニューが非表示となります。
$(function() {
$(".menu li").hover(
function() {
//クラス名「open」を付与する
$(this).children(".menuSub").addClass("open");
//hoverが外れた場合
}, function() {
//クラス名「open」を取り除く
$(this).children(".menuSub").removeClass("open");
}
);
});
まとめ
jQueryのslideUp/slideDownとaddClass/removeClassを使って、ドロップダウンメニューを実装する方法をご紹介しました。
アニメーション的に動きを入れるか、瞬時に表示と非表示をするかによって今回ご紹介した2つの方法が参考になると思います。自由にカスタマイズして、ぜひ使い分けてみてください。
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
