【WordPress】スライドで出てくるメニューをjQueryを使って実装する方法を詳解。

2013/04/13

Written by: EISUKE

Category: IT

モバイルテーマを変更する上で画面の小ささ故に必要な情報をどこに埋め込むかが問題になってきます。例えば、カテゴリーなどをナビゲーションバーの様に表示したい場合は場所を取ってしまいます。そんな時はボタンを押すとカテゴリーメニューが出てくると便利ですよね。

そんな感じのメニューを実装してみたので実装方法を紹介してみたいと思います。jQuery初心者（始めて3ヶ月程度）なので不手際があるかもしれないですが、僕の環境で実際に動作しているので問題ないと思います。

jQueryでヌルッと出てくるメニュー

どんな感じかと言うと、メニューボタンを押すとヌルッと上からスライドして出てくるメニューです。今回はWordPressで使われてるナビゲーション（メニュー）を表示させてみました。

ナビゲーションメニューを表示する

まず。ナビゲーションメニューを表示する方法はWordPressの本などでも取り上げられているようにwp_nav_manu()を使って適切な場所に表示させます。

<div id="nav">
	<?php wp_nav_menu(array(
		'theme_location' => 'navigation'
)); ?>
</div>

ここでは、セレクターidに”nav”を割り当てました。

MasterPeace21 すると、このようにリスト形式(liタグ付き)で表示されるのが確認できました。ここでは見やすいように背景をグレーにしました。

まずは、これにCSSを当てて綺麗なメニューになるようにデザインして行きたいと思います。

ナビゲーションメニューをデザインする

#menu-navimenu {
	list-style: none;
	margin: 0px;
	padding-left: 0px;
	width: 100%;
}
.menu-item {
	padding: 10px 0px;
	background: -webkit-linear-gradient(top, 
	rgba(91,91,91,1) 20%,
	rgba(45,45,45,1) 100%);
	border-top: 1px solid #666;
	text-indent: 10px;
}
.menu-item a {
	color: white;
	display: block;
	letter-spacing: 0.2em;
}

MasterPeace21 1 ナビゲーションメニューのリストスタイルを無効にして、1個ずつのメニューに対して、グラデーション付きの背景を設定。さらに文字色を白にしました。

ここで、肝になっているのが、リンクにブロック要素を割り当てる事で押せる範囲を広くしてあげている事です。

記事へのリンクをCSSでBLOCK要素にしてあげるユーザーに優しいサイト作り | MasterPeace21

メニューボタンを実装する

メニューを出すためのボタンを実装です。まぁ、ただ単にメニューと書いたものをHTMLで作るだけです。ここでは、header-menuというdiv要素の中にmenuというセレクターを割り当てたものをボタンとします。

<div id="header-menu" style="padding:5px;">
<span id="menu">MENU｜</span>
</div>

CSSではこんな感じでしょうかね。

#header-menu{
	width:100%;
	background:#444;
	overflow:hidden;
}
#menu{
	color: white;
	padding: 0px 10px;
	font-size:22px;
	letter-spacing:0.4em;
	float:left;
}

MasterPeace21 2 ここまで、出来たらこんな感じになっているはずです。もちろんデザインは各々好きな様にしてもいいですし、このままでもいいです。

背景色のグラデーションなどを変えたいときは、CSS Generatorなどを使うとかっこ良くなると思いますよ！

Ultimate CSS Gradient Generator - ColorZilla.com

メニューを非表示にする

このままだと、メニューが出たまんまじゃん！なので、メニューを非表示にしましょう。最初に割り当てたセレクターidのnavに対して非表示をCSSで設定します。

#nav {
display: none;
}

はい、これだけ。ちゃんと非表示になりましたでしょうか？

jQueryを使う下準備

ここからが、本題のjQueryです。まずはjQueryをインクルードしていない人はヘッダーにjQuery使うためのコードを記述しなきゃいけません。

<head>
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
...
</head>

＜head＞部分に上のコードを記述します。googleがホストしているファイルです。ちょっと古いかもしれません。公開されているテーマを使っている場合はjquery/1.7.2/jquery.min.jsみたいなのが最初から書いてあるかもしれませんので、必要ありません。

ヌルッと出してみる

jQuery(JavaScript)は＜script type=”text/javascript”＞***＜/script＞の中に記述します。たいていヘッダー部分に記述されていますので、探してみてください。

見つかったら以下のコードを記述します。

jQuery(function(){
	$("#menu").toggle(function(){
  		$("#nav").slideDown(700);
		},function(){
		$("#nav").slideUp(700);
		}
	});
});

ここで、jQueryの表記法については触れませんが、簡単に解説します。

まずは、jQuery使いますよのおまじないでjQuery(function(){＊＊＊});。＊＊＊に処理を書いていきます。(jQueryでなく$でもいいですがWordPress的にはコレがいいらしい。)

そして#menu[$(‘#menu’)]が一回押された時[toggle(function(){***}]に***の処理をしてくださいね。もう一回押された時に[,function(){***}]の処理をしてくださいね。という意味です。

toggleというのは、押された時に交互に処理を実行するメソッドになっています。

なんとなく理解出来るとおもいますが、処理の中に記述されているのは、[$(“#nav”).slideDown(700);]と[$(“#nav”).slideUp(700);]の2つの処理です。これはセレクターnavをヌルッと700msecで出してね。と700msecでヌルッと隠してね。です。

これで、ヌルッと表示できるんじゃないでしょうか？

これだけでは親切ではない

これで基本的には完成で、表示は出来ましたが表示させたのがモバイル表示の上のバー。これでは閉じたいときに上の方を押すのに大変。というわけでクローズボタンも設置しましょう。

<div id="nav">
	<?php wp_nav_menu(array(
		'theme_location' => 'navigation'
)); ?>
<div class="close">CLOSE</div>
</div>

#close{
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
font-size: 30px;
letter-spacing: 0.2em;
text-align: center;
line-height: 42px;
color:#444;
width:100%;
font-weight:bold;
}

ナビゲーションメニューの下にCLOSEボタンを書き加えます。これを押した時に閉まるように改善させてあげましょう。

CLOSEボタンで閉まる様に

クローズボタンで閉まるようにするには、一見下のようなコードで十分な気がしてしまいます。

$(".close").click(function(){
		$("#nav").slideUp(700);
});

もちろん、これでもちゃんと動作はするのですが、実際に使ってみると問題点があります。それはメニューボタンを押してクローズボタンで閉まう。そして再度メニューボタンを押すと開かないんです。

これはtoggleが一回目の処理を完了して、クローズボタンを押され閉まっているのにも関わらず再度メニューボタンを押した時に二回目の処理（閉まる）をしてしまうからです。

これを改善するにはtoggleでは無く単純にclickメソッドに書き換える事で解決できます。

jQuery(function(){
	var flag = 0;
	$("#menu").click(function(){
		if(flag == 0){
  		$("#nav").slideDown(700);
		flag = 1;
		}else if(flag == 1){
		$("#nav").slideUp(700);
		flag = 0;
		}
	});
	$(".close").click(function(){
		$("#nav").slideUp(700);
		flag = 0;
        });
});

メニューが開かれているかどうかを、flagという変数で管理してあげる方法です。開いている状態はflagを１に閉じている状態はflagを０にしてあげます。

これで、どっちのボタンを押しても綺麗に動作することが可能になります。flagで表示を管理する方法は他のもスライドさせたいメニューが存在する場合に役立つでしょう。

以上、長くなってしまいましたが、jQueryでヌルッとメニューを表示する方法でした。