どうもおはようポテト(@ohayoupoteto22)です。
アコーディオンメニューってどうやって作るん?
ということで今回は
アコーディオンメニューを爆速で作りたい
シンプルなやつでいいから開閉するメニューを作りたいんじゃ
という方に向けて「jQueryでアコーディオンメニューを実装する方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
早速いってみよう!
完成イメージ
- 鶏
- 牛
- 豚
- 鮫
こんな感じでマウスを乗せると縦にスライドするアコーディオンメニューを作ります。
お腹空いてきたんだけど…
くるみ
手順
いたって簡単なので秒で作れちゃいます。
手順
step1
入れ子のリストを作る
step2
子リストを非表示にする
step3
スライドさせる
ブログ主
※(秒では作れ)ないです
jQueryでアコーディオンメニューを実装する方法
HTML
<ul class="accordion">
<li>
<div class="meat">鶏</div>
<ul class="menu">
<li><a href="#">唐揚げ</a></li>
<li><a href="#">竜田揚げ</a></li>
<li><a href="#">フライドチキン</a></li>
</ul>
</li>
<li>
<div class="meat">牛</div>
<ul class="menu">
<li><a href="#">牛タン</a></li>
<li><a href="#">カルビステーキ</a></li>
<li><a href="#">サイコロステーキ</a></li>
</ul>
</li>
<li>
<div class="meat">豚</div>
<ul class="menu">
<li><a href="#">生姜焼き</a></li>
<li><a href="#">酢豚</a></li>
<li><a href="#">豚トロ</a></li>
</ul>
</li>
<li>
<div class="meat">鮫</div>
<ul class="menu">
<li><a href="#">フカヒレスープ</a></li>
</ul>
</li>
</ul>
このように入れ子のリストを作っちゃいます。
menuというクラスのリスト達を隠したり表示させたりしてアコーディオンメニューに仕上げます。
JavaScript
$(function(){
$(".menu").hide();
$(".meat").mouseover(function(){
$(".menu").slideUp();
if($("+ul",this).css("display")=="none"){
$("+ul",this).slideDown();
}
});
});
まず子リストのメニュー達を非表示に。
そして常にメニューたちは非表示にし、マウスで上に乗った時にメニューが開かれていればスライドダウンさせ隠し、開かれていなければスライドアップで表示させています。
クリックでスライドさせたければ「mouseover」を「cilck」にすればOKです。
$(".meat").mouseover(function(){
$(this).addClass("hover"); })
.mouseout(function(){
$(this).removeClass("hover") });
こんな感じでボタンにホバーを付けることも。
おまけのCSS
.accordion{
width:200px;
padding:0;
color:#fff;
background-color:#FF8C65;
}
.accordion,.menu{
margin:0;
list-style: none;
}
.meat{
line-height: 50px;
font-size:1.1em;
text-shadow: 2px 4px 3px rgba(0,0,0,.1);
border-bottom:7px solid #fafafa;
}
.meat:before{
font-family: "Font Awesome 5 Free";
content: "f105";
color: #fff;
font-weight: 900;
padding-right:7px;
padding-left:10px;
text-shadow: initial;
}
.menu{
padding-top:5px;
background-color:#fbfbfb;
}
.menu a{
display:block;
text-decoration: none;
line-height: 40px;
color:#888;
}
.hover{
background-color:#fcd69e;
}
おまけのCSSです。上の完成イメージと同じようにする場合は適宜どうぞ。
これで完成です。
お疲れ様!
くるみ
以上になります。
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝