「pageslide.js」はFacebookモバイル版のような感じで
メニューか横からスッとコンテンツごとスライドして表示するタイプのプラグイン。
最近良く使うのでいろいろメモ。

使い方

基本的な設置方法は下記参照

・スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました
・[JS]画面の右や左から、ダイナミックにメニューをスライド表示できるjQueryプラグイン「PageSlide」

レスポンシブで使ってみる

「pageslide.js」をそのまま使うと、レスポンシブサイトで等では
スライドされるコンテンツが拡大されてしまったりする。

こんな感じ（DEMO）

まぁそもそもの仕様なので個人的には特に気にならない。
でも「拡大されるのは嫌だから直せ」と言われた場合は仕方が無いので直す。

原因と対処法

拡大される原因はどうやらコンテンツの幅がスライドした分も加算されて拡大されるっぽい。
なので強制的に幅を固定する。

$(function() {
	var w_width = $(window).width();
	$('body').css('width',+w_width);
});

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }

    timer = setTimeout(function() {       
  	if(jQuery.support.opacity){
		var r_width = $(window).width();
		$('body').css('width',+r_width);
	}
    }, 100);
});

jsで強制的にbodyの幅をwindowの幅に合わせる。
初回読み込み時とウィンドウサイズを変えた時の2回。

すると↓こんな感じで拡大されずにそのままスライドする

DEMO

スマホ用スクロール対策

「スマホでメニューが出てるときはスクロールさせたくない！」
とかいう我侭を言われたら下記「jquery.pageslide.js」に追記。

110行目辺りに追記（スマホでスクロール禁止）

// Open
/* ↓追記↓ */
$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});
/* ↑追記↑ */
$.pageslide( settings );	

161行目辺りに追記（スクロール禁止解除）

$.pageslide.close = function( callback ) {
    $(window).off('.noScroll');//←追記
    var $pageslide = $('#pageslide'),
	・・・

CSSもpositionをfixedに変更

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

jQuery

• 
• Tweet