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

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

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

参考にしたのはこちらの記事で、ほとんど丸コピなんで皆様におかれましてもこちらを参考にしてください。
[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のアコーディオンがページロード時に一瞬開いてしまう問題の対処法