目的:jQueryを使ってアコーディオンメニューをつくる。
“TRIPLEXXX:jQueryでアコーディオンメニューを作成する“を参考にさせていただきました。
下記にサンプルをかきかきしてみよう。
もちろんだが、jQueryをつかっているのでライブラリを入手して読み込みます。
今回は、jquery-1.4.3.min.jsを使用しました。
xhtml
<ul class="acc"> <li><a href="1">menu1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a></li> </ul> </li> <li><a href="2">menu2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3">menu3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul>
css
ul.acc a, ul.acc li ul a { text-decoration: none; color: #EFEFEF; } ul.acc a:hover, ul.acc li ul a:hover { text-decoration: underline; } ul.acc ,ul.acc li ul { list-style: none; } ul.acc { width: 150px; color: #EFEFEF; background-color: #333333; } ul.acc a{ padding: 0 10px; display: block; height: 30px; line-height: 30px; } ul.acc li { border-top: 1px dotted #555555; } ul.acc li ul { margin: 0 0 0 15px; background-color: #666666; } ul.acc li ul a { padding: 5px; display: block; height: 20px; line-height: 20px; } ul.acc li ul li{ border-top: 1px dotted #888888; }
1.シンプルなアコーディオンメニュー
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(){ $j(this).next().toggle().parent().siblings() .children("ul:visible").hide(); return false; }); }); }); });
2.メニューの開閉がスムーズなアコーディオン
// 変更前 $j(this).next().toggle().parent().siblings() .children("ul:visible").hide(); // 変更後 var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params);
よって
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(){ //$j(this).next().toggle().parent().siblings() //.children("ul:visible").hide(); var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); });
3.メニューの開閉がスムーズなアコーディオン(透明度もアコーディオン♪)
//変更前 var params = {height:"toggle"}; //変更後 var params = {height:"toggle", opacity:"toggle"};
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; }); }); }); });
よし!
と思いきや、これではmenu 1-1など、リンクが無効になってしまっている。
理由はreturn false;でリンク先に飛ばないよう設定してしまっているため。
回避するには…return false;を消すわけにはいかないので、、、
アコーディオンにしたいaタグにクラス指定をする!
さぁやってみよう…
<ul class="acc"> <li><a href="1" class="open">menu1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a></li> </ul> </li> <li><a href="2" class="open">menu2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">menu3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul>
合わせてスクリプトの指定も変更
//変更前 $j("li > a", this).each(function(index){ //変更後 $j("a.open", this).each(function(index){
無事成功。
これでリンクが指定したURLに飛びます。
以下自分用まとめ
【今回使用するセット】
xhtml
<ul class="acc"> <li><a href="1" class="open">menu1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a></li> </ul> </li> <li><a href="2" class="open">menu2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">menu3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul>
css
ul.acc a, ul.acc li ul a { text-decoration: none; color: #EFEFEF; } ul.acc a:hover, ul.acc li ul a:hover { text-decoration: underline; } ul.acc ,ul.acc li ul { list-style: none; } ul.acc { width: 150px; color: #EFEFEF; background-color: #333333; } ul.acc a{ padding: 0 10px; display: block; height: 30px; line-height: 30px; } ul.acc li { border-top: 1px dotted #555555; } ul.acc li ul { margin: 0 0 0 15px; background-color: #666666; } ul.acc li ul a { padding: 5px; display: block; height: 20px; line-height: 20px; } ul.acc li ul li{ border-top: 1px dotted #888888; }
js
var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); });