jquery jQuery を使った縦にスライドするメニュー

CATEGORY: jQuery | TAG:

2013年5月17日

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。

ul 要素を入れ子にして、ツリー構造を記述

例：親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。

  • 「+」「-」「■」の3つの画像を用意。
  • 親メニュー（div.parentmenu）にマウスオーバーすると「+」印が表示され、選択（クリック）すると「-」印に変わり、サブメニュー（ul.submenu li）が表示される。
  • サブメニューが表示されている場合は、親メニューにマウスオーバーすると「-」印が表示され、クリックするとサブメニューは非表示になる。
  • サブメニューがないもの（a 要素）は、マウスオーバーすると「■」印が表示され、クリックするとリンク先にジャンプする。

この例はデザイン的なことやユーザビリティには配慮していないので、使用するアイコン画像、その表示のタイミング等に関しては別途考慮する必要がある。

<ul class="navi">
  <li><div class="parentmenu">News</div>  
    <ul class="submenu">
      <li><a href="#">Events</a></li>
      <li><a href="#">Activities</a></li>
    </ul>
  </li>
  <li><a href="indexjp.php">Contact</a></li>
</ul>

スタイルシートを記述

ul.navi{  
  width: 180px;    /*メニューの幅全体を指定*/
}
ul.navi li div.parentmenu {
  padding-left: 25px;    /*マウスオーバー時に背景に画像を表示するためパディングを指定*/
  cursor: pointer;    /*マウスオーバー時にカーソルをポインターに*/
}
ul.navi li div.parentmenu:hover {
  background: url(../images/Menu/menu_plus.gif) no-repeat left center;
  /*マウスオーバー時に背景に「＋」印の画像を表示*/
} 
ul.navi li div.selected:hover {
  background: url(../images/Menu/menu_minus.gif) no-repeat left center;
  /*サブメニューをすでに表示している時は、マウスオーバー時に背景に「-」印の画像を表示*/
} 
ul.navi li div.selected {
  color: #333;
  background: #EEE;
  /*サブメニューを表示している時は、親メニューの背景に色を付ける*/
}
ul li {
  font-size: 13px; font-size: 1.3rem; 
  line-height: 20px;
}
ul li a {
  outline: 0;    /*Firefoxでリンクをクリックした際、リンクの回りに点線が表示されないように*/
  padding-left: 25px;    /*マウスオーバー時に背景に画像を表示するためパディングを指定*/
  display: block;
}
ul li a:hover {
  color: blue;
  background: url(../images/Menu/menu_square.gif) no-repeat left center;
  /*マウスオーバー時に背景に「■」印の画像を表示*/
}
ul.submenu {
  padding-left: 30px;  /*サブメニューはインデントして表示*/
}

jQuery を記述

親メニューをクリックしたとき、サブメニューが開かれていなければ、サブメニューを表示し、サブメニューが開かれていれば、サブメニューを閉じる。

また、サブメニューが開かれている親メニューにクラス「selected」を付与して、マウスオーバー時に背景に「-」印の画像を CSS で表示するようにする。

$('ul.submenu').hide();
  $('ul.navi li div.parentmenu').click(function() {
    $('ul.submenu').slideUp(200);
    $('ul.navi li div.parentmenu').removeClass('selected');    
    if($('+ul', this).css('display') == 'none') {
      $('+ul', this).slideDown(200);
      $(this).addClass('selected');
    }    
  });
  • サブメニューをすべて非表示に。
  • 親メニューをクリックした場合の処理を記述。
  • 親メニューをクリックしたとき、サブメニューが開かれていれば、slideUp でそれらを全て閉じる。
  • 親メニューがすでにクリックされサブメニューが表示されれいれば、クラス「selected」を削除する。
  • クリックした親メニュー（this）に隣接する ul 要素（サブメニュー）が表示されていなければ、slideDown で表示する。
  • 親メニュー（this）にクラス「selected」を追加する。