JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

jQuery でシンプルなトグルメニューを作る方法

jQuery でトグルメニューを作る

メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ってみます。

<サンプル>

まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層にあるサブメニューがスライドして出現します。そして、サブメニューが展開された状態で、もう一度青色文字の項目をクリックすると今度は展開されたサブメニューが収納されます。

親項目1
  • 子項目1-1
    • 孫項目1-1-1
    • 孫項目1-1-2
    • 孫項目1-1-3
  • 子項目1-2
    • 孫項目1-2-1
    • 孫項目1-2-2
    • 孫項目1-2-3
      • ひ孫項目1-2-3-1
      • ひ孫項目1-2-3-2
      • ひ孫項目1-2-3-3
  • 子項目1-3
    • 孫項目1-3-1
    • 孫項目1-3-2
    • 孫項目1-3-3
親項目2
  • 子項目2-1
    • 孫項目2-1-1
    • 孫項目2-1-2
    • 孫項目2-1-3
  • 子項目2-2
    • 孫項目2-2-1
    • 孫項目2-2-2
    • 孫項目2-2-3
  • 子項目2-3
    • 孫項目2-3-1
    • 孫項目2-3-2
    • 孫項目2-3-3

jQuery / JavaScript

スクリプトはいたってシンプルです。「class="aaa"」がある要素をクリックすると「class="bbb"」が設定された要素を展開したり閉じたりしているだけです。最後の行はページを読み込んだ瞬間にサブメニューを閉じているスクリプトで、これがないと最初からサブメニューが展開されてしまいます。 

$(function(){

     // class="aaa" が付いた要素をクリックすると…
     $(".aaa").click(function(){
          // class="aaa" の次にある class="bbb" 要素をスライドさせる
          $(this).next(".bbb").slideToggle(1000);
     });

     // 開始直後に展開したサブメニューを閉じている
     $(".bbb").slideToggle(0);
}); 

CSS

このCSSでは、親項目を赤色の文字にして行全体を項目として判断しているのと、親項目にマウスカーソルが乗った時にカーソルを「手」の形にしていますが、必ず必要なものではありません。このCSSがなくてもトグルメニューは動作します。 

<style type="text/css"><!--

     .aaa { color: #0FF; width: 100%;}
     .aaa:hover { cursor: pointer;}

--></style> 

HTMLコード

上のトグルメニューを実現するには「div」タグ「ul」タグ「li」タグを使用します。ポイントはサブメニューを展開する項目のタグに「class="aaa"」を設定、展開される項目を「class="bbb"」で一括りにするところ。 

<div class="aaa">親項目1</div>
     <ul class="bbb">
          <li class="aaa">子項目1-1</li>
               <ul class="bbb">
                    <li>孫項目1-1-1</li>
                    <li>孫項目1-1-2</li>
                    <li>孫項目1-1-3</li>
               </ul>
          <li class="aaa">子項目1-2</li>
               <ul class="bbb">
                    <li>孫項目1-2-1</li>
                    <li>孫項目1-2-2</li>
                    <li class="aaa">孫項目1-2-3</li>
                         <ul class="bbb">
                              <li>ひ孫項目1-2-1</li>
                              <li>ひ孫項目1-2-2</li>
                              <li>ひ孫項目1-2-3</li>
                         </ul>
               </ul>
          <li class="aaa">子項目1-3</li>
               <ul class="bbb">
                    <li>孫項目1-3-1</li>
                    <li>孫項目1-3-2</li>
                    <li>孫項目1-3-3</li>
               </ul>
     </ul>
<div class="aaa">親項目2</div>
     <ul class="bbb">
          <li class="aaa">子項目2-1</li>
               <ul class="bbb">
                    <li>孫項目2-1-1</li>
                    <li>孫項目2-1-2</li>
                    <li>孫項目2-1-3</li>
               </ul>
          <li class="aaa">子項目2-2</li>
               <ul class="bbb">
                    <li>孫項目2-2-1</li>
                    <li>孫項目2-2-2</li>
                    <li>孫項目2-2-3</li>
               </ul>
          <li class="aaa">子項目2-3</li>
               <ul class="bbb">
                    <li>孫項目2-3-1</li>
                    <li>孫項目2-3-2</li>
                    <li>孫項目2-3-3</li>
               </ul>
     </ul>

備考・その他

いかがでしたでしょうか?難しそうなトグルメニューも jQuery を使えば、実質1行のスクリプトで実現できてしまいます。

今回のトグルメニューのデザインサンプルはとてもシンプルなものですが、少し工夫すればグッと見栄えの良いトグルメニューになると思いますので、ぜひこの作り方を参考にしてグレードアップに挑戦してみてください。