サイドバー折り畳み２：折り畳み過程を非表示に

ちょっと思いついたのでやってみたら、案外うまくいってしまったのでメモ書き。

facetさんのサイドバー折り畳み２：状態保持機能付きで、折り畳まれるまではリストの内容が一瞬表示されてしまうのが、前々からちょっと気になっていました。

特に(今の私のように(泣))ダイヤルアップのようなナローバンド環境だったりすると、リストが沢山ある場合や、画像が使われていたりする場合には、一瞬どころではなく、かなり目立ってしまいます。

折り畳みスクリプトを複数設置するなどすれば軽減されますが、なんとか根本的な解決法はないか、と思っていましたが……。
次のような方法でやってみたら、私的には満足の行く結果が得られました。

1. サイドバー内の、HTMLを記述できる場所で、なるべく上の方に、
   <style type="text/css"> <!-- .sidebar div.module-body ul { display: none; } .sidebar div.module-body:before { color: red; font-size:12px; font-weight:bold; text-decoration:blink ; content: "読み込み中 . . ." ; } --> </style>
   を記述する。
2. サイドバー折り畳み２の後に、
   <style type="text/css"> <!-- .sidebar div.module-body ul { display:block; } .sidebar div.module-body:before { content: "" ; } --> </style>
   を記述する。

これで、少なくともこのサイトでは、折り畳み中のリスト内容表示を抑制できました(^o^)。
私と同じように感じていた方は、いちど試されてみてはいかがでしょうか(思わぬ副作用とかがあったらすみません)。

折り畳み２以外でも、リスト内容を加工して表示するようなスクリプトを設置している場合には、応用が利くかも知れません。

2006.03.18

あまりにおおざっぱだと思い、".sidebar ul {..}"を".sidebar div.module-body ul {..}"に修正。また、facetさんのところを参考に、"読み込み中"表示を追加(ただしIE6は未対応)。