[WordPress]スマートフォン用のメニューバーをjQueryで

Posted on

Sponsored Link

スマートフォンからアクセスした時のメニューがひどいことになっていたので外してしまおうかと思ってましたが、どうせならということでスマートフォン用のを設置しました。

iPhoneから見てもらうとわかるんですが、こんな感じの作りました。
タップでいい感じに出てきてくれます。
IMG_3355 IMG_3356

参考にしたのはこちらの記事で、ほとんど丸コピなんで皆様におかれましてもこちらを参考にしてください。
[WordPress][jQuery]スマートフォン用のモバイルテーマにスライド式のメニューバーを配置したので実装メモ | OZPAの表4

まずはヘッダーの<?php wp_head(); ?>の上に(これ結構大事らしい)以下のコードを。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
// メニューバースライド
	$(function(){
			$(".mobileMenuUnder1,.mobileMenuUnder2,.mobileMenuUnder3,.mobileMenuUnder4,.mobileMenuUnder5,.mobileMenuUnder6,.mobileMenuUnder7,.mobileMenuUnder8").css('display','none');
			});
		$(function(){
			$("ul.mobileMenu_ul").click(function(){
				$(".mobileMenuUnder1,.mobileMenuUnder2,.mobileMenuUnder3,.mobileMenuUnder4,.mobileMenuUnder5,.mobileMenuUnder6,.mobileMenuUnder7,.mobileMenuUnder8:not(:animated)").slideToggle(500);
			});	
		});
		</script>

あとは表示したい位置にこれを。

<div id="mobileMenubar">
	<ul class="mobileMenu_ul">Menu</dt>
			<li class="mobileMenuUnder1">
				<a href="#">Menu1</a>
			</li>
			<li class="mobileMenuUnder2">
				<a href="#">Menu2</a>
			</li>
			<li class="mobileMenuUnder3">
				<a href="#">Menu3</a>
			</li>
			<li class="mobileMenuUnder4">
				<a href="#">Menu4</a>
			</li>		
			<li class="mobileMenuUnder5">
				<a href="#">Menu5</a>
			</li>		
			<li class="mobileMenuUnder6">
				<a href="#">Menu6</a>
			</li>		
			<li class="mobileMenuUnder7">
				<a href="#">Menu7</a>
			</li>		
			<li class="mobileMenuUnder8">
				<a href="#">Menu8</a>
			</li>		
	</ul>
</div>

CSS

/* メニューバー */

#mobileMenubar{
	margin-top: 0;
	}

ul.mobileMenu_ul{
	list-style: none;
	margin: 0;
	text-align: center;
	height:auto;
	background: -moz-linear-gradient(top,  #6d4238 0%, #6d4238 100%); /* FireFox */
	background: -webkit-linear-gradient(top,  #6d4238 0%,#6d4238 100%); /* Chrome,Safari */
	color:#eee;
	font-size:1.4em;
	font-weight: bold;
	}

li.mobileMenuUnder1,
li.mobileMenuUnder2,
li.mobileMenuUnder3,
li.mobileMenuUnder4,
li.mobileMenuUnder5,
li.mobileMenuUnder6,
li.mobileMenuUnder7,
li.mobileMenuUnder8 {
	margin: 0;
	list-style: none;
	text-align: center;
	background: -moz-linear-gradient(top,  #565656 0%, #252525 100%); /* FireFox */
	background: -webkit-linear-gradient(top,  #565656 0%, #252525 100%); /* Chrome,Safari */
	font-size:0.8em;
	}

li.mobileMenuUnder1 a,
li.mobileMenuUnder2 a,
li.mobileMenuUnder3 a,
li.mobileMenuUnder4 a,
li.mobileMenuUnder5 a,
li.mobileMenuUnder6 a,
li.mobileMenuUnder7 a,
li.mobileMenuUnder8 a {
	color:#lid;
	list-style: none;
	text-decoration:none;
	}

そのまま設置すると左側に余白できてしまったのでlist-style: none;とmargin: 0;を追加。

僕はWPTouch使ってないので画面のサイズによって変わるように以下も追加。

@media screen and (min-width: 1020px) {
#mobileMenubar
 {
		display: none;
	}
}

@media screen and ( max-width: 1020px ) {

.main-navigation
 {
		display: none;
	}

}

#mobilemenubarは幅が1020以下の時だけ、普通のメニューは1020以上の時だけ表示するようにしてます。

手元にある一部のAndroidとWindowsPhoneだとうまく表示されないんだけど、なかなか味わい深い色になってるのでスルー。

あとアクセスした時にお漏らしっぽい挙動するのが気持ち悪いけどサブリミナル効果を狙って放置。

修正しました。
jQueryのアコーディオンがページロード時に一瞬開いてしまう問題の対処法




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>