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

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

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


古い記事です!

ブログテーマを変更したので現在は使っておりません。

こんなかんじに

修正前

140728-1

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

修正後

140728-2

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

参考

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

ボタンをつける

140728-3

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

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

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

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_btnpc_btnと、jQueryを動かすためのopenというクラスを与えておきます。

Multi Device Switcherというプラグインでテーマ切替していて、4行目の「PC表示」はプラグインの機能を利用しています。

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の大きさでテキスト置換して表示しています。

メニュー画面をつくる

140728-4

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で動作不具合

140728-5

さー、これで良し!と思ってしばらく様子を見てたら、なんか…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」┌)┘))

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

スマホでよく見る画像のスライドショーと、アコーディオンのメニューを一緒に実装した際のメモもありますのでよろしければ。

公開日:2014/07/28

2件のコメント

  1. 通りすがりです より:

    昔の記事に余計なお世話で恐縮ですが、slidedown,slideupで開閉するならslideToggleのほうがコードが短くて、間違いも少なくていいですよ。
    $(function(){
    $(“.open”).click(function(){
    $(“#menu”).slideToggle();
    });
    });

    • *you より:

      余計なお世話だなんてとんでもないです! アドバイスありがとうございますー!(´∀`*)


通りすがりです へ返信する コメントをキャンセル

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)