[み]クリックで開閉するアコーディオンメニューをjQueryで実装する方法

最近だと、ほとんどのWebサイトがレスポンシブになってますね。ハンバーガーメニューなんていう言葉もだいぶ通じるようになってきた気がしています。

とくにスマートフォンでの閲覧時に、グローバルナビはハンバーガーで対応するとして、PC表示時にはサイドバーにずらずらーっと並んでいる、カテゴリーやらタグやらアーカイブやらは、そのまま位置を変えて表示するだけだとなかなか目的のところを探しにくいですね。

ということで、このカテゴリーやらタグやらアーカイブあたりのサイドバーに並びそうなものを、jQueryを使って、クリック(タップ)すると開閉するアコーディオンメニューを実装する方法を紹介します。

クリックで開閉するアコーディオンメニューを実装

まずは、アコーディオンメニューってどんな感じなのか、デモをご覧ください。
DEMO

ぜんぜんおしゃれでないデモですが、こんな感じに、クリック(タップ)で開閉するアコーディオンメニューをjQueryで実装します。

html

まずはhtmlです。

<h3 class="side-title">アーカイブ ※クリックしてください</h3>
<ul>
  <li class="side-p p1">
    2017
    <ul class="side-c c1">
      <li><a href="">2017.1</a></li>
    </ul>
  </li>
  <li class="side-p p2">
    2016
    <ul class="side-c c2">
      <li><a href="">2016.1</a></li>
      <li><a href="">2016.2</a></li>
      <li><a href="">2016.3</a></li>
      <li><a href="">2016.4</a></li>
      <li><a href="">2016.5</a></li>
      <li><a href="">2016.6</a></li>
      <li><a href="">2016.7</a></li>
      <li><a href="">2016.8</a></li>
      <li><a href="">2016.9</a></li>
      <li><a href="">2016.10</a></li>
      <li><a href="">2016.11</a></li>
      <li><a href="">2016.12</a></li>
    </ul>
  </li>
</ul>

CSS

次にCSSです。といっても、メニューを開いたときに、▼が▶になるっていうのを除くと、メニューが最初は見えないように display: none; してるだけですw

ul {
  display: none;
}
.side-c {
  display: none;
}
.side-p:before {
  content: "▶";
}
.side-p.open:before {
  content: "▾";
}

JavaScript(jQuery)

そして、JavaScript(jQuery)です。

$(function() {
    $('.side-title').click(function(){
        $(this).toggleClass('open');
        $(this).next().slideToggle();
    });
    $('.p1').click(function(){
        $(this).toggleClass('open');
        $('.c1').slideToggle();
    });
    $('.p2').click(function(){
        $(this).toggleClass('open');
        $('.c2').slideToggle();
    });
});

クリック(タップ)すると、クリックされた要素の次の要素が表示されるというコードです。toggleClass(‘open’)は、メニューを開いたときに、▼が▶になるようにするために、open というクラスをつけるためです。

アコーディオンメニューを実装するのに、直接は必要ありません…

オプション

このクリックでの開閉ですが、スピードを調整することができます。

.slideToggle('slow');
.slideToggle('fast');
.slideToggle('2000');

slowとかfastの指定もできますし、ミリ秒(1/1000秒)での指定もできます。ちなみに、slowは600ミリ秒、fastは200ミリ秒です。

まとめ

メニューを開いたときに、▼が▶になるようにするために余計なコードが増えていますが、これを省略すると、実に簡単なコードになります。これも、toggleさんのおかげです!slideToggleで開閉toggleClassでクラスのつける・はずすをまとめてくれます!

サクッと実装できるので、jQueryむずかしそうだなーっていう方でも、とっかかりとしてはいいんでないでしょうか?:)

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup