jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」

jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」サンプル スマフォ版Facebookでは左上をタップするとメニューが表示されます。
最近のスマートフォンサイトでは多くみられるこの表現を、jQueryプラグイン「PageSlide」で実現しましょう。

使用方法 PageSlideからファイル一式をダウンロード。
下記のようにメニュー表示用リンクとメニューの中身を記述します。 <a href="#menu" class="show">メニュー</a>
<div id="menu" style="display:none">
メニュー
<!-- 閉じるボタン -->
<a href="javascript:$.pageslide.close()">Close</a>
</div>
あとはJavaScriptを上記の記述よりも下に書けば完成です。
<script type="text/javascript" src="/test/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/test/js/jquery.pageslide.js"></script>
<script>
$(".show").pageslide({
direction: "right"
});
</script>

なお、CSSは下記がサンプルです。
#pageslide {
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
//以下自由
width: 260px;
padding: 10px 20px;
border-right: 1px solid #CCC;
background: #FAFAFA;
}
jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」サンプル

sponsors

「jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」