【コピペで簡単】jQueryでアコーディオンメニューを実装する方法

くるみ

アコーディオンメニューってどうやって作るん?

ということで今回は

jQueryでアコーディオンメニューを爆速で作りたい
シンプルなやつでいいから開閉するメニューを作りたいんじゃ

という方に向けて「jQueryでアコーディオンメニューを実装する方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

お品書き

アコーディオンの完成イメージ
実装手順
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です。上の完成イメージと同じようにする場合は適宜どうぞ。

これで完成です。

お疲れ様！

くるみ