[wordpress]jQueryプラグイン「PageSlide」を使用してモバイルサイトにスライドメニューを実装してみたよ。

Tweet
トップへ

こんちくわ。
日々ロンドン五輪に興奮しまくりの@conchikuwaです。4年に1度、毎回毎回感動を与えてくれますね。日本選手に楽しんでガンバってもらいたいです！！

先週末にブログ合宿の時にモバイルサイトのカスタマイズにチャレンジしたんですが、レイアウトが崩れる箇所があったので実装はしておりませんでした。その後いろいろ調べたり試したりした結果、上手く実装できたので、そのカスタマイズのご紹介させていただきます！！

今回実装したカスタマイズはjQueryプラグイン「PageSlide」を利用してモバイルサイトをFacebookやGmail等のスマホアプリのように横スライドさせてメニューを表示させるというもの。モバイルサイトではPCサイトに比べて画面が小さく表示できる情報も少ないので、1アクション入れてメニューを表示させるのは有効なカスタマイズだと思います。

また実装する際に参考に（基本コピペですが。。。(^_^;)）は↓のサイトさん。

スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました | ウェビメモ
スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。コンテンツ量が多くてもメニュー分のスペースを考えずに構成できる …
いつもありがとうございます！

モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive – かちびと.net
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 …
いつもありがとうございます！

ウェビメモさんとかちびとさんにはWordpressのカスタマイズの際にいつも参考にさせていただいております。感謝(^^♪

jQueryプラグインは↓からダウンロードできます！

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane

まずはウェビメモさんの記事の通り、<header>～</header> と <body>～</body> と CSSにコードを追加します。CSSについては自分のモバイルサイトに合わせて少し修正しています。

↓ またメニュー用のボタンも作ってみました。

↓ jQueryプラグインを実装して、メニューボタンをタップすると、

↓ 左から横スライドしてメニューが表示されます。メニューにはカテゴリを表示させてみました。

またもう一度メニューボタンをタップするとメニューが閉じます。

↓ ただメニュー部が表示される事で、コンテンツ部分の表示域が狭くなり、レイアウトが崩れてしまっております。

これはモバイルサイト用にコンテンツ部の横幅をピクセル指定で固定せずにパーセント指定している為です。

↓ また下スクロールするとメニュー部までスクロールしてしまいます。

なので、ちょこっと自分なりにCSSを修正してみました。

まずはコンテンツ部の幅が狭くなっても、レイアウトが崩れないようにする為に、コンテンツ全体のCSS部にmin-width指定をつけてみました。こうする事で、メニュー部が表示されてもmin-width指定で指定した横幅より狭くなりません。

.wrapper {margin: 0 auto; padding: 0px 10px; background-color: #fff; min-width:300px;}

1	.wrapper {margin: 0 auto; padding: 0px 10px; background-color: #fff; min-width:300px;}

次にメニュー部をスクロールさせないようにposition指定を”absolute”から”fixed”に変更しました。

#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;

#pageslide {

/* These styles MUST be included. Do not change. */

display: none;

position: fixed;

top: 0;

height: 100%;

z-index: 999999;

↓ 上記修正を適用させると、
　