.fadeToggle()を使った簡単な開閉式のメニューの実装【軽めのjQuery Advent Calendar 2012 Day 8】

このエントリーは、軽めのjQuery Advent Calendar 2012の8日目の記事です。

この回では、女子うけがなかなかよいと噂される(謎).fadeToggle()を使った簡単な開閉式のメニューの実装について書かせていただきます。

.fadeToggle()とは

まずはじめに、いうほど新しめのAPIではないのですが、.fadeToggle()というAPIについての説明です。

.fadeToggle()とは、不透明度のアニメーションとともに、要素の表示または非表示にするAPIです。 jQueryには、.fadeIn().fadeOut()といったAPIがありますが、 .fadeToggle()は、それらが備わったAPIと言ってよいと思います。そのため、一つで二度美味しい便利なAPIだと私は思っています。 ちなみに、.fadeToggle()は、jQueryのバージョン1.4.4からサポートされました。

また、同じようなAPIで.toggle().slideToggle()があります。これらのAPIの説明は割愛します。

開閉式のメニューの実装

それでは本題です。

よくあるような下記図のようなメニュー1をクリックするとパネルが表示・非表示になる開閉式のメニューを実装していきます。

また、JavaScript無効環境のことも考えて、JavaScript無効環境でも使えるように実装していきます。 そのため、JavaScript無効環境では、開閉で表示されるパネルは表示されたままにするようにします。

JavaScript無効環境の姿(クリックしたときに表示された状態と同じ)

JavaScript有効環境の姿(クリックも何もしていない状態)

jQueryで実装するのは以下のようになります。

  1. パネルを非表示にする
  2. 下向きのアローアイコンに変更
  3. メニュー1をクリックするとパネルが表示・非表示
  4. パネルの表示・非表示時のアイコンの変更
  5. 「X」をクリックするとパネルを非表示

HTML

今回作成したHTMLは以下のようにします。

<ul id="menu" class="open">
<li class="btn-toggle"><a href="#">メニュー1</a>
<ul id="menu-child">
<li><a href="#">メニュー1-1</a></li>
<li><a href=""#>メニュー1-2</a></li>
<li><a href="#">メニュー1-3</a></li>
<li id="close"><a href="#"><img src="img/close.png" alt="閉じる"></a></li>
<!-- /menu-child --></ul>
</li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<!-- /menu --></ul>

1.パネルを非表示にする

このままだとパネルが表示されたままになるので、ページが読みこまれたときに、パネルを非表示にします。ここでは、CSSのdisplayプロパティでnoneの指定を行います。これをCSSでやってしまうとJavaScript無効環境では、パネルが開かなくなるので、JSで行います。

jQuery

//パネルを非表示にする
$('#menu-child').css('display', 'none');

2.下向きのアローアイコンに変更

デフォルトでは、上向きのアローアイコンになっているので、下向きのアローアイコンに変更します。アローアイコンは、 背景画像として持っているのでclassの書き換えを行います。

jQuery

//下向きのアローアイコンに変更
$('#menu').attr('class', 'close');

3.メニュー1をクリックするとパネルが表示・非表示

ここで登場するのが、.fadeToggle()です。メニュー1をクリックしたときなので、clickイベントを使います。 これで、メニュー1をクリックしたときにパネルがフェードイン効果で表示され、フェードアウト効果で非表示になります。

jQuery

//メニュー1をクリックしたときの表示・非表示の処理
$('.btn-toggle a').click(function(){
	$('#menu-child').fadeToggle();
	return false;
})

4.パネルの表示・非表示時のアイコンの変更

メニュー1をクリックしたときにパネルが表示のときは、上向きのアローアイコン、非表示のときは、下向きのアローアイコンとなるようにします。 ここで使う便利なAPIが.toggleClass()です。 .toggleClass()は、指定したclassを追加・削除の処理を行ってくれるので、ここでは、パネルが表示のときに、 activeというclassが追加され、パネルが非表示のときに、activeというclassを取り除くという処理にします。 アイコンの背景画像はCSSでactiveに指定しておきます。

jQuery

$('#menu').toggleClass('active');

これを上記の「メニュー1をクリックするとパネルが表示・非表示」の処理に追加します。

//メニュー1をクリックしたときの表示・非表示の処理
$('.btn-toggle').click(function(){
	$('#menu-child').fadeToggle();
	$('#menu').toggleClass('active');
	return false;
})

5.「X」をクリックするとパネルを非表示

パネルの下部に「X」があります。ここをクリックしたときに、パネルを非表示にします。ついでに、下向きのアローアイコンとなるようにします。

.fadeToggle()の非表示の処理は、.fadeOut()と同じなので、素直に.fadeOut()を使います。 また、パネルが表示されているときには、activeというクラスがあるので、これを取り除く処理.removeClass()を使います。

jQuery

//「×」をクリックしたときの非表示の処理
$('#close a').click(function(){
	$('#menu-child').fadeOut();         //パネルの非表示
	$('#menu').removeClass('active');   //activeというclassの削除
	return false;
})

以上がjQueryの実装となります。1から5のすべての処理のjQueryは以下のようになっています。

jQuery

$(function(){
	//パネルを非表示にする
	$('#menu-child').css('display', 'none');

	//下向きのアローアイコンに変更
	$('#menu').attr('class', 'close');
	
	//メニュー1をクリックしたときに表示・非表示の処理
	$('.btn-toggle').click(function(){
		$('#menu-child').fadeToggle();
		$('#menu').toggleClass('active');
		return false;
	})

	//「×」をクリックしたときの非表示の処理
	$('#close a').click(function(){
		$('#menu-child').fadeOut();         //パネルの非表示
		$('#menu').removeClass('active');  //activeというclassの削除
		return false;
	})
});

デモ

以上が.fadeToggle()を使った簡単な開閉式のメニューの実装の例でした。特にこれといって特別なことはありませんが、.fadeToggle()は意外と便利だったという話でした。引き続き、軽めのjQuery Advent Calendar 2012をお楽しみください。