以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。

jQueryプラグイン『jSlideMenu』

なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。

CSS – Googleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。

上記のページにGoogle先生のスライドメニューがパーフェクトなポイントというのが書いてありました。こ、これは良さそうや。。ゴクリ。

1. スライドのアニメーションがとても滑らか・ちらつかない
2. ボタンの反応にストレスを感じない
3. メインコンテンツ部分のどこをさわってもメニューが閉じる
4. 横スクロール対策がしっかりされている
5. メニューだけスクロールできる

DLは以下の
GitHubから。
ukitaka/jSlideMenu · GitHub

デモページ

というわけで早速試してみました。ちらつかなくてヌルリときもちー！！
デモは以下からどうぞ！※PCでは動きませんのでスマートフォンからどうぞ

DEMO

スライドメニュー注意点

使ってみて、個人的にここは気をつけなくては、と思った箇所を( ..)φメモメモしておきます。

★メニューに設定したい背景色はbodyにも設定しておく

body色の影響を受ける端末があります。メニューがグレーでbodyが白とかだとチラチラ気になる事があるのでbodyもグレーにしておきます。

★上部には<a><input>以外のものを置く

Androidでメニューボタンをクリックした時なんですが、このメニューはz-indexでコンテンツをかぶせてあるだけなので、メニューボタンの真下にあるオブジェクトを押せてしまうのです。

CSSでタップカラーを消したり、JSで無効にしたり、解決法も一応あるのですが（下記参照）面倒なので、検索フォームや何かへのリンク置くのはもう少し下にしたほうが良さそうだなと思いました。特に検索フォームはキーボードがひょっこり出てきちゃったりして最悪でしたｗ
はー。Android嫌いだなー( ´ω｀)

参考：2010-06-10 – 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 – subtech

★translate3dの使用について…

手元にあったGalaxySⅡで見てみたところそこまで気になる点はなかったんですが、Androidで色々とバグがあるみたいなので場合によってはtranslateXを使った方がいいのかもしれません。ちなみにGoogle先生はそっちみたいです。

参考：Androidの標準ブラウザにおいてtranslate3dが引き起こす不具合について | BALLOG

以上、霙でした！