ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。

サンプルページを作ってみましたのでご覧下さい。

→ 「PageSlide」サンプルページ

セカンドコンテンツには追加情報などの他にも、フォームやメニューを加えたりと利用価値は高そうです。

jQueryプラグイン「PageSlide」の設置方法は続きをどうぞ。


まずは、「PageSlide」のページからjQuery Pluginを一式ダウンロードします。

<head>部分にcssを指定します。

<head>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.pageslide.css” />
</head>

そして、任意の場所(</body>の直前など)にJavaScriptを設定します。

<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/jquery.pageslide.min.js”></script>
<script>
$(“.クラス名1”).pageslide();        //隠れページが右にスライドされる
$(“.クラス名2”).pageslide({ direction: “left”}); //隠れページが左にスライドされる
</script>

続いて、別ファイルに隠れページのコンテンツを作って、任意のファイル名で保存します。これで準備完了です。

<body>部にリンクを張ります。

<a href=”隠れページのファイル名.html” class=”クラス名”>リンクさせたい文字列など</a>

これで、リンクをクリックすると隠れページがスライドされて現れます。

サンプルのソースを以下に書いておきます。どうぞご参考まで。

MainPage

SecondPage(Luffy.html)

 

この記事と関連してると思われる記事: