オンマウスで開くslideToggleを使った簡単なアコーディオンメニュー

PR　当ページのリンクには広告が含まれています。

hoverで表示する、jQueryのナビゲーションメニューを作りたい！

カーソルをあてるとサブメニューがスライド表示される、下のようなサンプルを作りたいと思います！
（こちらは装飾をしていないので、デザインに合わせてスタイルシートを追加していく必要があります。）

• メニューA
  • ページA-1
  • ページA-2
  • ページA-3
• メニューB
  • ページB-1
  • ページB-2
• メニューC
  • ページC-1
  • ページC-2
  • ページC-3

html

<ul class="menu-test lineup">
<li class="menu-parent"><a href="#">メニューA</a>
<ul class="sub-menu">
<li><a href="#">ページA-1</a></li>
<li><a href="#">ページA-2</a></li>
<li><a href="#">ページA-3</a></li>
</ul>
</li>
<li class="menu-parent"><a href="#">メニューB</a>
<ul class="sub-menu">
<li><a href="#">ページB-1</a></li>
<li><a href="#">ページB-2</a></li>
</ul>
</li>
<li class="menu-parent"><a href="#">メニューC</a>
<ul class="sub-menu">
<li><a href="#">ページC-1</a></li>
<li><a href="#">ページC-2</a></li>
<li><a href="#">ページC-3</a></li>
</ul>
</li>
</ul>

js

<script>
$(function(){
 $(".menu-parent").hover(function(){
   $(this).children(".sub-menu").stop().slideToggle();
  });
});
</script>

27行目jsの「hover」を「click」にすると、クリックした時にメニューが表示される仕様になります。このほかjQueryも忘れずに読み込みます。

CSS

<style>
.menu-test > li{position: relative;}
.menu-test .sub-menu{display: none;top: 40px;position: absolute;}
</style>

cssのポイントは、①サブメニューを非表示にしておくこと、②表示させたときに、下の本文が一緒に下がってしまわないようposition: absolute; で絶対配置にすることです。