サイドバー折りたたみ
2005年11月14日(月) AM 8:35
前からやってみたかったサイドバーを折りたたみを導入しました。
コチラのサイト様で紹介されているものをそのまま実行。
簡単に出来ました。
小粋空間様のサイドメニューの折りたたみ（v4.0）
小粋空間様のサイドメニューの折りたたみに画像を使用する
小粋空間様のサイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）
ゆっくり折りたたむようにはしていませんが、
スクリプトはv5.0を使用しています。
続きは自分の為の覚書です。
折りたたみ用スクリプトをＤＬしてテキストエディタで開いて設定をします。
スクリプトをDLするところの右にあるマニュアルを見ると
設定内容が詳しく書かれています。
<head>～</head>の間にインクルード文を追加。コピペでOK。
スタイルシートに小粋空間様の説明に書いてあるソースを
コピペで追加して保存します。
折りたたみをしたいメニュータイトルに
スタイルシートを反映させるためのclassを指定します。
私の場合、小粋空間様のスタイルシートを
そのままコピペして使用しているので
<div class="sidetitle2">
●●
</div>
●●はメニュータイトルです。
画像を使用するためにスタイルシートを変更します。
中が透過されている画像を作ったので
スタイルシートの変更点は、枠線のところを消して、
background-image:urlは同じものを追加。
背景色とを通常時とマウスポイント時で違うものにして
マウスを当てたときに色が変わるように設定しています。
こんな感じでなんとか無事に出来ました♪
って、自分の為の覚書だからわかりにくい説明だわ～
::Comment Form::