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

JQuery logo color ondark

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

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

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

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

リストサンプル①

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

サンプル①

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を使えばね!!

リストサンプル②

というわけでtoggleを使った場合のサンプルはこんな感じ。

サンプル②

こちらhtmlの記述内容はほぼ一緒。(サンプル①とはクラス名だけを変えています。)
一方のjQuery側の記述は、、、

[javascript]
$("#sampleBtn.sampleBtn02 a").click(function() {
$(".sampleBtn02").toggleClass("current");
$("nav.sample-list2").slideToggle();

return false;
});
[/javascript]

はい、シンプル!!
変数openで状態を保持してaddClass()、removeClass()とやっているところをtoggleClass()一発。
ちゃんと交互にclassの有無を切り替えてくれます。

さらに、css()で高さやらアニメーションの設定やらを与えていたところを、slideToggle()で一発。
これで対象になった要素がスライド開閉してくれます。

いやー、簡単だ!

ちなみに、最後の
[javascript]
return false;
[/javascript]
これが地味に大事!

html側では
[xml]
<a class="icon icon-list" href="#"></a>
[/xml]

と書いてるので、jQuery側でfalseを返して遷移を無効化しておかないと、開閉ボタンを押した時にページの上部へ遷移してしまいます。
メニューの開閉ボタンを押す度に画面遷移しちゃうと困っちゃうので、こちらお忘れなく!

とまあそんなわけで、新テンプレのメニューはtoggleClass()でサクッと仕上げることになりそうです。

テンプレ開発状況はこんな感じ!

wordpressのお勉強のついでに、GitHubの使い方も勉強してみよう!ということで、今回のテンプレート開発はGitHubでバージョン管理をすることにしました。
決して人様にお見せできるようなコードではないんですが、無料ユーザは非公開での開発ができないので、以下で恥をさらしてみようと思います。

/ultimate-ez/ultimateez_v3

素人のひどいコードに対して文句を言いたくなるところもあるかもしれませんが、お手柔らかにお願いします。。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です