[備忘録]jQueryで開閉式のメニューを作りたいなら、slideToggle()やtoggleClass()を使うとめっちゃ楽！

相変わらず、ボチボチとwordpressの新テーマ作りを進めています。

現状のテーマと同様今回もレスポンシブで行こう！ってことで、まずはメニュー（ナビゲーション）の作成から。
スマートフォンやタブレット向けのUIで現在主流なのは、
・メニューボタンを押すと画面全体が横にズズズ〜っとズレてメニューが表示されるもの（FacebookのアプリなんかのUIで有名なアレ。）
・メニューボタンを押すと縦にぐい〜んとメニューが開閉するもの（アコーディオンUIとか言われているアレ。）
ってところ。

新テーマはどういうUIで行こうか悩ましいところですが、現状のテーマが横にズズズ〜のUIを採用していたので、今回の新テーマは縦にぐい〜んで行くことにします。
ノリです。

というわけで早速メニューの作成。
横にズズズの仕組みは、ボタンが押されたらページを構成しているdiv要素を何ピクセル横に移動させるというド直球な処理を入れていていたので、今回も同様にまずは必要な要素を必用なピクセル分だけ動かす処理を書いてみました。
前回に引き続き、数カ月前のweb designingを参考にしています。

Web Designing (ウェブデザイニング) 2013年 03月号 [雑誌]

マイナビ

Amazonで詳しく見る

リストサンプル①

作ってみたものの実際の動きはこんな感じ。

サンプル①

htmlの構成は以下のとおり、単純なリスト構造の上部にボタン（といってもただのaタグのリンク）を設置しています。

[xml]
<div id="nav-case">
<div id="sampleBtn" class="sampleBtn01"><a class="icon icon-list" href="#"></a></div>
<nav class="sample-list1">
<ul>
<li><a href="#">リスト項目①</a></li>
<li><a href="#">リスト項目②</a></li>
<li><a href="#">リスト項目③</a></li>
<li><a href="#">リスト項目④</a></li>
<li><a href="#">リスト項目⑤</a></li>
</ul>
</nav>
</div>
[/xml]
※最初はnavタグに対してdisplay:none;を指定して非表示にしています。

jQueryはこんな感じ。

[javascript]
var open = 0;

$("#sampleBtn.sampleBtn01 a").click(function() {
var $gnav = $("nav.sample-list1");
var gnavHeight = $gnav.height();
if(!open) {
open = 1;
$(".sampleBtn01").addClass("current");
$gnav.css({display:"block", marginTop:-gnavHeight+"px"}, 300, "swing").animate({marginTop:"0"});
} else {
open = 0;
$(".sampleBtn01").removeClass("current");
$gnav.animate({marginTop:-gnavHeight+"px"}, 300, "swing", function() {
$(this).removeAttr("style");
});
}
return false;
});
[/javascript]

期待通りには動いてくれているものの、開閉の状態を保持する変数(open)、その値で条件分岐してaddClass/removeClassしつつ、アニメーションについての細かい指定も記述。
なかんなか複雑です。

しかし、「ここまで細かくアニメーションの指定なんかしなくてもいいよ！」という人であれば、この処理はもっと超絶シンプルに記述することが出来るんです！
そう、slideToggle()とtoggleClassを使えばね！！