2005-06-13

サイドバーのメニューを Peek-a-boo スタイルにした |Blogger|CSS|JavaScript|

サイドバーにあるメニューを Peek-a-boo スタイルにした。 firefox や IE でこのサイトを見ていれば、サイドバーのタイトル (About とか Link とか) をクリックして、内容の非示・非表示が切り替えられる。コードは、JavaScript と CSS だけ。JavaScript 非対応なウェブ・ブラウザー ( lynx とか w3m) では、非表示の切り替えはできないけど、見る分に問題はない。 Blogger のヘルプで参考にしたコードが Peek-a-boo comments という名前で紹介されていたので、このページでもそういう風に呼ぶ事にしますね (本当は何て言うんだろ?)。

Blogger のヘルプは 2005-06-13 現在、日本語訳されていない。というわけで、Tips をおりまぜてコードの説明を書いとく。

JavaScript, CSS, and HTML

JavaScript のコードは以下の通り。これを head エレメントの中に書いておく。

<script type="text/Javascript"> 

function togglecomments (postid) { 

   var whichpost = document.getElementById(postid); 
   
   if (whichpost.className=="commentshown") { 
      whichpost.className="commenthidden"; 
   } 
   else { 
      whichpost.className="commentshown"; 
   } 
} 
</script>

CSS のコードは短い。

.commenthidden {display:none}
.commentshown {display:inline}

ようは、CSS で表示・非表示するクラスを定義して、JavaScript で適義クラスを設定してやるだけ。HTML のコードは次のようになる。

<a href="javascript:togglecomments('cXXX')">ココをクリックすると表示・非表示が切り替わる</a>

<span class="commenthidden" id="cXXX">
  表示・非表示される内容。
  ウェブページを開いた時、この内容は非表示になっている。
  最初から表示させるには class="commenthidden" を "commentshown" にする。
</span>

「表示・非表示される内容」を含む span エレメントの id cXXX はページの中で固有であれば何でもよい。ただし、 javascript:togglecomments の引数に同じ値 (ここでは cXXX) を指定しなければいけない。

Small Hack

このページで使ってる Peek-a-boo スタイル (?) は、上のコードに若干手を入れたもの。表示・非表示を切り替える文字列の前に、上向き三角 (表示時) と下向き三角 (非表示時) を出すようにした。修正版 JavaScript は次の通り。

function toggle_display (head_id,body_id) {

   var whichhead = document.getElementById(head_id);
   var whichbody = document.getElementById(body_id);

   if (whichbody.className=="body_shown") {
      whichhead.className="head_hidden";
      whichbody.className="body_hidden";
   } else {
      whichhead.className="head_shown";
      whichbody.className="body_shown";
   }
}

そして、CSS はこう。

.body_hidden { display: none;  }
.body_shown  { display: block; }
.head_hidden:before { content: "▼ "; } /* #x25bc */
.head_shown:before  { content: "▲ "; } /* #x25b2 */

サイド・バーの About は、Templete で次のように書いた。

  <h2 class="sidebar-title"><a id="habout" class="head_shown" href="javascript:toggle_display('habout','babout')">About</a></h2>
  <div class="body_shown" id="babout">
   <p><$BlogDescription$></p>
   <p>[ <a href="<$BlogSiteFeedUrl$>" title="Atom feed">Site Feed</a> ]</p>
  </div>

CSS の :before を使って、head_shown クラスの前に文字を生成させてる。もし、これを本文の中に直接書き込むようにすると、JavaScript・CSS 非対応なブラウザーで表示・非表示両方の場合の文字が見えることになってマヌケに見えちゃう。

Blogger 用の設定

サイドバーの About はデフォールトで表示。クリックして初めて非表示になる。そんなに長いものじゃないし、オプション的に非表示にできればいいか、という感じ。ただし、Previous とか Archives なんかは長くなりそうだから、ItemPage では非表示にしておきたい。そこは、 Blogger の Templete で対処。ちと繁雑だけど、次のコードを書いてる。 

 <MainOrArchivePage>
  <h2 class="sidebar-title"><a id="hprevious" class="head_shown" href="javascript:toggle_display('hprevious','recently')">Previous</a></h2>
  <ul id="recently" class="body_shown">
 </MainOrArchivePage>
 <ItemPage>
  <h2 class="sidebar-title"><a id="hprevious" class="head_hidden" href="javascript:toggle_display('hprevious','recently')">Previous</a></h2>
  <ul id="recently" class="body_hidden">
 </ItemPage>
    <BloggerPreviousItems>
      <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
    </BloggerPreviousItems>
  </ul>

ref

時刻:
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)