ゼロからはじめるSliding JavaScript Side Bar - Ajaxで動的サイドバー

Sliding JavaScript Side Barを使う

それでは実際にSliding JavaScript Side Barを使ってみましょう。サイドバーには、お気に入りのサイトへのリンクリストを表示するものとします。Script.aculo.us版では以下のようにprototype.jsライブラリとScript.aculo.usのエフェクトライブラリを順番に読み込ませます。その次にスライド処理を行うside-bar.jsを読み込ませます(*1)。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>

Sliding JavaScript Side Barを使用する場合はスタイルシートも定義する必要があります。このスタイルシートはライブラリ展開時に生成されるindex.htmlファイルの内容を利用するか、必要に応じて修正して使用します。ここで説明するサンプルはスタイルシートファイルを別に用意し読み込ませます。

<link rel="stylesheet" href="css/main.css" type="text/css">

これでSliding JavaScript Side Barを利用する準備が完了です。それでは実際のHTMLコードを見ていきます。 Sliding JavaScript Side Barでは指定された<div>タグとID名を使い以下の構成にする必要があります。■タブと■表示内容の部分は自由に設定することができます。

<div id="sideBar">
    <a href="#" id="sideBarTab">■タブ</a>
    <div id="sideBarContents" style="display:none;">
        <div id="sideBarContentsInner">
            ■表示内容
        </div>
    </div>
</div>

サンプル01ではサイドタブがクリックされるとお気に入りのサイト一覧を表示します。


サンプル01の実行画面	クリックすると、サイドからメニューが表示される

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/effects.js"></script>
        <script type="text/javascript" src="js/side-bar.js"></script>
        <title>Sliding JavaScript Side Barサンプル</title>
    </head>
    <body>
        <h1>Sliding JavaScript Side Barサンプル</h1>
        <div id="sideBar">
            <a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar"></a>
            <div id="sideBarContents" style="display:none;">
                <div id="sideBarContentsInner">
                    <h2>お気に入りサイト一覧</h2>
                    <ul>
                        <li><a href="http://www.openspc2.org/">OpenSpace</a></li>
                        <li><a href="http://www.yahoo.co.jp/">Yahoo JAPAN</a></li>
                        <li><a href="http://www.google.co.jp/">Google</a></li>
                        <li><a href="http://jp.youtube.com/">You Tube</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

サイドタブの位置を変更したい場合はスタイルシートのtopプロパティを変更します。なお、サイドタブは右側からしか表示できないようになっているため、タブを左側に設定することはできません。

#sideBar{
    position: absolute;
    width: auto;
    height: auto;
    top: 100px; ←■ココ
    right:0px;
    background-image:url(images/background.gif);
    background-position:top left;
    background-repeat:repeat-y;
}