スマホ版で上からメニューがにゅっと降りてくるjQueryを実装してみた

このブログは、スマホ用に別テーマをつくってあるんですが、そこのメニューを今風（？）にしてみたいなーと思ってやってみました。

こんなかんじに

修正前

フッターにただリストが書いてあって、そこにページ内リンクが貼ってあるだけでした。（キャプチャ撮り忘れて、過去のを探したら壁紙が違う時代のやつしか見つからずwww）

修正後

ボタンを押すと、上からメニューがにゅっと降りてくるスタイルに。カテゴリやタグなど、更にここからアコーディオン出来たら…と最初ちょっと考えたのですが、内容が多すぎてメニューが全画面被ってしまうのも微妙に思ったので、別画面にリンクする形にしました。

参考

• スマートフォンサイトでちょっとしたメニューを上からにゅっと出すときに使えるシンプルなjQuery｜ウェビメモ
• jQueryで下からニョキッと動かす方法 | THE HAM MEDIA BLOG

jQueryはあまり得意ではないのですが、こちらを参考にさせていただき、無事実装できました！いつもありがとうございますー！

ボタンをつける

まずフォトショでボタンを作成。実寸でつくると、スマホ表示したときにぼんやりしてしまうので、2倍のサイズで。

• ズルいデザイン（4）：ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン (1/3) – ＠IT

参考にさせていただいたっていうかもうほぼこの通りすぎるボタンをつくってしまいました！ズルい！すてき！((└(:3」┌)┘))

• スマートフォントUI

こちらのフォントを使わせてもらっています。

header.php

<nav class="navi-area">
	<ul>
		<li><a class="menu_btn open">メニュー</a></li>
		<li><a class="pc_btn" href="?pc-switcher=1">PC表示</a></li>
	</ul>
</nav>

ボタン画像と置換するためのmenu_btn・pc_btnと、jQueryを動かすためのopenというクラスを与えておきます。

style.css

/* ナビボタン */
.menu_btn{ background: url(images/menu_btn.png); }
.pc_btn{ background: url(images/pc_btn.png); }
.menu_btn, .pc_btn{
	display: block;
	background-size: 80px 25px;
	width: 80px;
	height: 25px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

160*50pxのボタン画像を、1/2の大きさでテキスト置換して表示しています。

メニュー画面をつくる

header.php

シンプルなリストとしてつくっています。最後に「閉じる」用のcloseというクラスを用意しておきます。

style.css

/* 上からにゅっと降りてくるメニュー */
#menu{
	display:none; /* 最初は非表示 */
	width:100%;
 	position: fixed;
	z-index:999;
	top: 0px;
	left: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 0 3px 0 #333;
	background: url(images/menu.png); /* 背景画像 */
	background-size: 120px 120px;
	padding:5px;
}
#menu ul{ margin:25px; }
#menu ul li{
	padding: 10px 0;
	text-align: center;
	border-top: solid 1px #9a8d7d; /* 明るい線 */
	border-bottom: solid 1px #523820; /* 暗い線 */
	}
#menu ul li:first-child{ border-top:none; }
#menu ul li:last-child{ border-bottom:none; }
#menu a{
	display: block;
	height: 20px;
	color: #fff;
	text-shadow: 0 1px 1px #333;
	text-decoration:none;
	tap-highlight-color:rgba(186,151,123, 0.3)!important; /* タップした色 */
	-webkit-tap-highlight-color:rgba(186,151,123, 0.3)!important; /* タップした色 */
	}

このブログで使ってるCSSなので、細部は調整ください。ざっくりした布の背景画像を用意して、それも1/2の大きさで表示しています。

「閉じる」部分を、最初は画像を使っていたのですが、表示が一呼吸遅れるのが気になって、「そうだ！スマホなんだからCSS3使って矢印つくっちゃえばいいんじゃん！」と（今更）気がつき、やってみました。

#menu p.close{
	display: block;
	margin:0 auto;
	width: 15px;
	height: 15px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-top: solid 1px #fff;
	border-left: solid 1px #fff;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	box-shadow: 1px 1px 1px #333 inset;
	-webkit-box-shadow: 1px 1px 1px #333 inset;  
	}

正方形にして、左と上だけborderを書いて、それを45°回転させる、という感じでできるんですねー。

開閉させる

jQuery

<script type="text/javascript">
(function($) {
	$(function(){
		$(".open").click(function(){
			$("#menu").slideDown();
		});
		$(".close").click(function(){
			$("#menu").slideUp();
		});
	});
})(jQuery);
</script>

あとは、openのクラスがクリックされたときにスライドダウンして、closeのクラスがクリックされたらスライドアップ、ということを書いてやります。（WordPressでない場合は2行目と11行目は必要ありません。）

わたしはこのまま使ってますが、slideDown()・slideUp()のかっこ内に数値を入れてスピードを調整できます。

Androidで動作不具合

さー、これで良し！と思ってしばらく様子を見てたら、なんか…Androidでのタップ領域がおかしい気がする…。。左上あたりを狙わないと動作しないような…。

テキストリンクのときは大丈夫だったんだけどな。画像置換にしてから動作が妙な気が。

• スマートフォンブラウザ不具合特集

いろいろググってみたら、このあたりが怪しい！

<nav class="navi-area">
	<ul>
		<li><a class="menu_btn open"><div>メニュー</div></a></li>
		<li><a class="pc_btn" href="?pc-switcher=1">PC表示</a></li>
	</ul>
</nav>

divで括る…！ふぉぉ…！こうしたら、全体がタップできるようになりました！凄い！ありがとうございます！！((└(:3」┌)┘))

以上です！自己満足ではありますが、一度こういうのやってみたかったので楽しかったですー！