クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」

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

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

→　「PageSlide」サンプルページ

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

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

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

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

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

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

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

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

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

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

MainPage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」サンプル</title>
  	<link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" />
</head>

<body>
        <h1>「PageSlide」サンプルページ</h1>
        <p>下のリンクをクリックするとセカンドページがスライドされて現れます。</p>
        <ul>
            <li>
                <a href="Luffy.html" class="first">モンキー・Ｄ・ルフィ</a>
			</li>
			<li>
                <a href="Zoro.html" class="second">ロロノア・ゾロ</a>
			</li>
	    </ul>

    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.pageslide.min.js"></script>
    <script>
        $(".first").pageslide();        
        $(".second").pageslide({ direction: "left"});
    </script>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」サンプル</title>

</head>

<body>

<h1>「PageSlide」サンプルページ</h1>

<p>下のリンクをクリックするとセカンドページがスライドされて現れます。</p>

<ul>

<li>

</li>

<li>

</li>

</ul>

$(".first").pageslide();

$(".second").pageslide({ direction: "left"});

</script>

</body>

</html>

SecondPage（Luffy.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <style>
        body {
            font: 14px/18px ;
            color: #EFEFEF;
        }
        
        h2 { color: #FFF; }
    </style>
</head>
<body>
    <h2>モンキー・D・ルフィ</h2>
      <p>支配なんかしねェよ</p>
      <p>この海で一番自由な奴が</p>
      <p>海賊王だ!!!</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body {

font: 14px/18px ;

color: #EFEFEF;

}

h2 { color: #FFF; }

</style>

</head>

<body>

<p>支配なんかしねェよ</p>

<p>この海で一番自由な奴が</p>

</body>

</html>

あわせてお読みください

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください…

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

Sidr スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。 FacebookのページやYouTubeでも…

スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」

「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。 16種類ものエフェクト効果があり、それらをランダムに使用す…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」

→　「PageSlide」サンプルページ

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」

→ 「PageSlide」サンプルページ

あわせてお読みください

コメントを残す コメントをキャンセル

→　「PageSlide」サンプルページ

コメントを残すコメントをキャンセル