どうも、おつぱ（ @OZPA ）です。
最近Wptouchをカスタマイズしてスマートフォン用のモバイルテーマを作成したわけなんですが、おべんきょちゅうのjQueryを使ってメニューバーを作ったろかい！とばかりに実装してみました。
画期的なUI
iPhoneなどでみるとこんな感じです。
「タップするとMenuが出たり引っ込んだり」の部分をタップすると…
Menuが文字通り出てきます。
もう一度タップすると引っ込みます。
本来であれば一度タップした時点で「Menu」の部分が「閉じる」とかになってしかるべきなのですが、余計なスクリプトを排除し、文字のみで「あぁ、ここをタップすればメニューが閉じるんだな」と理解させるという画期的なUIになっております。
めんどくさかったとかそういうことではないです。
以下実装メモ。
マークアップ
<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>
マークアップはこちら。タイトル下などお好きなところに配置しましょう。
実装する際はMenuにしたい項目の分だけliを追加するなり削除するなりしてくだしあ。
headタグ
<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>
（中略）
</head>
headタグ内に上記のようにjQueryとスクリプトタグを記述。ちなみに、プラグイン「wptouch」を使用している際は、デフォルトですとheadタグが「wp-content/plugins/wptouch/core/core-header.php」にありますのでご注意を。
CSS
/* メニューバー */
#mobileMenubar{
margin-top: 0;
}
ul.mobileMenu_ul{
text-align: center;
height:auto;
paliing: 10px;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FireFox */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome,Safari */
color:#eee;
font-size:1.2em;
font-weight: bold;
}
li.mobileMenuUnder1,
li.mobileMenuUnder2,
li.mobileMenuUnder3,
li.mobileMenuUnder4,
li.mobileMenuUnder5,
li.mobileMenuUnder6,
li.mobileMenuUnder7 {
margin: auto;
paliing:10px;
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.mobileMenuUnder8 {
text-align: center;
margin: auto;
paliing:10px;
background: -moz-linear-gradient(top, #565656 0%, #252525 100%); /* FireFox */
background: -webkit-linear-gradient(top, #565656 0%, #252525 100%); /* Chrome,Safari */
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
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;
text-decoration:none;
}
CSSはご覧の通り。色合いを変更したい場合はCSS3ジェネレーターを使うと便利だぜ！
そんなわけでできあがったのが冒頭のメニューバーです。
iPhoneでしか閲覧していないのですが、挙動がおかしいよ！という方いらっしゃいましたら@OZPA まで教えてくださると嬉しいです。
まだ見ていない！という方はスマホから是非見てみてね！
