ウインドウの横に隠れるサイドナビゲーションJavaScript (side-bar.js)
2007年6月20日(水) 11:00
コンテンツにナビゲーションを設置する際、コンテンツの端にタブ状のナビゲーションを表示できるようにしてくれるのが、side-bar.js。タブをクリックするとスライドしながら、メニューが表示される。
利用するにはmootools.js又は、scriptaculous.jsが必要になる。ダウンロードファイルには動作に必要なJavaScriptファイルとデザイン用の画像イメージなども含まれている。CSS記述などはサンプルのHTML中に記述されているので、参考にすると良い。

サイドバーの横幅を変更
サイドバーの横幅を変更するには、side-bar.jsの3行目付近にある設定用の値を変更すればよい。デフォルトではwidth = 200となっているの部分を任意の数値(ピクセル)で指定できる。
サイドバーのデザインを変更
デザインの変更は、スタイルシートでほぼ変更が可能になっている。常に表示されるタブ部分のみ画像イメージになっているので、任意のイメージと差し替えればよい。
サイドバーの表示位置を、左側に変更する設定は無い。修正するにはJavaScriptコードやスタイルシートを修正する必要がある。興味のある方はチャレンジしてみてはいかがだろうか?
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

