ウインドウの横に隠れるサイドナビゲーションJavaScript (side-bar.js)

2007年6月20日(水) 11:00

side-bar.js
コンテンツにナビゲーションを設置する際、コンテンツの端にタブ状のナビゲーションを表示できるようにしてくれるのが、side-bar.js。タブをクリックするとスライドしながら、メニューが表示される。

利用するにはmootools.js又は、scriptaculous.jsが必要になる。ダウンロードファイルには動作に必要なJavaScriptファイルとデザイン用の画像イメージなども含まれている。CSS記述などはサンプルのHTML中に記述されているので、参考にすると良い。

サイドバーの横幅を変更
サイドバーの横幅を変更するには、side-bar.jsの3行目付近にある設定用の値を変更すればよい。デフォルトではwidth = 200となっているの部分を任意の数値(ピクセル)で指定できる。

サイドバーのデザインを変更
デザインの変更は、スタイルシートでほぼ変更が可能になっている。常に表示されるタブ部分のみ画像イメージになっているので、任意のイメージと差し替えればよい。

サイドバーの表示位置を、左側に変更する設定は無い。修正するにはJavaScriptコードやスタイルシートを修正する必要がある。興味のある方はチャレンジしてみてはいかがだろうか?

さくらインターネット

関連する記事