TRIPLEXXX

アコーディオンメニューは、数あるメニューUIの中で最もサンプルが多いように思います。しかし、レイアウトや動作がクロスブラウザで満足いくものはなかなか見当たりません。そこで今回は、クロスブラウザ,XHTML＆CSS valid なアコーディオンメニューの作り方を説明します。まず jQuery を使った必要最小限のコードで実装してから、順に仕上げていくことにします。

シンプルなアコーディオンメニュー

xhtml:

<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(){
					j$(this).next().toggle().parent().siblings()
						.children("ul:visible").hide();
					return false;
				});
			});
		});
	});

アコーディオンメニュー：

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

メニューの開閉動作をスムースなアニメーションにする

jQueryっぽく、メニュー開閉時にアニメーションさせます。

javascript:

//　変更前
				j$(this).next().toggle().parent().siblings()
					.children("ul:visible").hide();
 				//　変更後
				var params = {height:"toggle", opacity:"toggle"};
				j$(this).next().animate(params).parent().siblings()
					.children("ul:visible").animate(params);

スムーズに開閉するアコーディオンメニュー：

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

メニューの高さを揃える

メニュー項目の数によらずメニュー領域の高さを固定にする場合は、ul.acc li ul 要素の height を指定します。これはアコーディオンというのかスライドメニューというのか。

CSS:

ul.acc li ul {
  height 150px;
}

各メニューの高さが揃っているアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

横幅を指定する

アコーディオンメニューの横幅を固定にする場合は、最上位の ul 要素の width を指定します。

CSS:

ul.acc {
  width 150px;
}

横幅が固定されたアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

カテゴリの背景を画像にする

背景画像を使って角が丸いアコーディオンメニューを作成します。最下段のカテゴリは、閉じているときに角丸、開いているときに矩形、の画像に各々切り替えます。

javascript:

function setBackground() {
	var $last = j$(".acc > li:last > a");
	if($last.hasClass("close"))
		$last.css("background-position", "left bottom");
	else
		$last.css("background-position", "left -30px");
}

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

		if(index > 0)
			$this.addClass("close").next().hide();
		else
			$this.css("background-position", "left top");

		setBackground();

		var params = {height:"toggle", opacity:"toggle"};
		$this.click(function(){
			j$(this).toggleClass("close").next().animate(params)
				.parent().siblings().children("ul:visible")
					.animate(params).prev().addClass("close");
			setBackground();
			return false;
		});
	});
});

CSS:

/* 背景色は削除すること
ul.acc{
	background-color: #185AAC;
}
*/
/* ul.acc > li > a {  IE6では無効 */
/* ↓メニュー項目にも背景画像が設定される */
ul.acc li a {
  background: url(images/acc_bg.png) left -30px no-repeat;
}

/* メニュー項目の背景画像をクリアする */
ul.acci li ul li a {
  background: none;
}

カテゴリの背景画像を設定したアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

IE6の場合

IE6ではアニメーション動作が飛んでしまいます。また、背景画像の透過部分が青っぽくなります。iepngfix 等で透過させると background-position での背景画像切り替えが動作しません。IE6での表示を考えるなら、透過画像ではなく角丸の外を背景色でペイントした画像を使うのが簡単です。

Finally

以下の項目を調整して完成です。

• 最下段メニューのオープン時にメニューリストの bottom を角丸にする。
• アンカーリンクのインデント，デコレーション。
• メニュー開閉時のアニメーション速度。

brush-up 後のアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

ダウンロード

xxx_accordion.zip(4KB)

以下のファイルが含まれています。

• index.htm
• acc_bg.png　カテゴリの背景画像
• acc_menu_last.png　最下段メニューリストの bottom 用画像

利用するには、jQuery(バージョン1.2.6以上)が必要です。