WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> jquery -> jqueryで開閉式メニュー(アコーディオンメニュー)を作成

jqueryで開閉式メニュー(アコーディオンメニュー)を作成

2011-05-21

jquery

jqueryで開閉式メニュー(アコーディオンメニュー)を作成

メニューの項目数が増えてくると一度で全てを表示するのは難しい。
しかし、だからといってカテゴリーに分けて何度も読み込みをさせるのもユーザーに対しては親切でないように思う。

そんなときにjqueryで実装可能な開閉式のメニュー(アコーディオンメニュー)の作り方が詳しく掲載されているページを見つけたのでメモ。

メニュー部分に限らず、使い方次第では長くなりがちなコンテンツページをすっきりと見せる効果もあります。

■実装サイト
http://www.lelativement.com/
右側のメニューが開閉します。
http://www.toubeauty.com/
下部の帯状になっている部分が開閉します。

※利用するには、jQuery(バージョン1.2.6以上)が必要です。
http://jquery.com/

無料ホームページ素材

SOURCE
■HTML
<ul class="acc">
<li><a href="1">category1</a>
<ul class="fxmn">
<li><a href="11">menu 1-1</a></li>
<li><a href="12">menu 1-2</a></li>
<li><a href="13">menu 1-3</a></li>
</ul>
</li>
<li><a href="2">category2</a>
<ul class="fxmn">
<li><a href="21">menu 2-1</a></li>
<li><a href="22">menu 2-2</a></li>
<li><a href="23">menu 2-3</a></li>
<li><a href="24">menu 2-4</a></li>
</ul>
</li>
<li><a href="3">category3</a>
<ul class="fxmn">
<li><a href="31">menu 3-1</a></li>
<li><a href="32">menu 3-2</a></li>
<li><a href="33">menu 3-3</a></li>
<li><a href="34">menu 3-4</a></li>
<li><a href="35">menu 3-5</a></li>
</ul>
</li>
</ul>

■CSS
ul.acc, ul.acc li ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.acc a{
display: block;
height: 30px;
line-height: 30px;
color: #feffff;
}
ul.acc {
background-color: #185AAC;
}
ul.acc li ul {
background-color: #A6B5E2;
}

■JAVASCRIPT
var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0) $this.next().hide();

$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
j$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);
return false;
});
});
});
});
参考サイト
jQueryでアコーディオンメニューを作成する
http://triplexxx.jp/archives/150

WEB制作の定番書