Movable Type 備忘録

 ナビゲーションバーのカレントリンクを強調表示する

こんにちわ^^

サクッと作ってみました (●＞∀＜●)／
現在表示中のページ（URL）がナビゲーションバー上のリンクと一致した場合、そのリンクを強調表示する JavaScript を♪

以前は PHP で同じようなことをやったことありますが、今度は prototype を使って JavaScript で実装してみました。
利点としては、テンプレートに依存しない!? と思われまするぅ (●´∀｀●)

ダウンロード

以下から JavaScript（prototype 版）をダウンロードできます。

- 2008.02.12 追記 -
すいません、URL 間違ってたみたいです。修正しました。

使い方

わたしのサイトのナビゲーションバーは以下のようにマークアップされてます。

  1. <div id="navibar">
  2.     <ul>
  3.     <li><a href="http://bizcaz.com/">HOME</a></li>
  4.     <li><a href="http://bizcaz.com/archives/">ARCHIVE</a></li>
  5.     <li><a href="http://bizcaz.com/archives/tagcloud/">TAGCLOUD</a></li>
  6.     <li><a href="http://bizcaz.com/archives/movabletype/plugins/">PLUGIN</a></li>
  7.     <li><a href="http://bizcaz.com/archives/blogroll/">BLOGROLL</a></li>
  8.     <li><a href="http://bizcaz.com/archives/coreserver/">CORESERVER</a></li>
  9.     </ul>
  10. </div>

ダウンロードした prototype.navibar.js 内の 8 行目に ID 'navibar' の子要素になる ul タグを指定することで、ul タグの子孫要素をすべて抽出してアンカータグを検索してます。

  1. prototype.navibar.js / 8 行目
  2. $$('#navibar ul').each(function(element) {

ID 名称は 'navibar' でなくっても問題ありません。 各自のテンプレートに合わせて prototype.navibar.js 内を変更します。 また、ID 'navibar' の子要素が必ずしも ul タグでなくってもいいです。

ポイントは、できる限り抽出する要素数を少なくすることでしょうか。

たとえば、上記では #navibar ul と指定していますが、#navibar だけだと <div id="navibar"> に包含されるすべての要素が抽出されます。 その中から目的のアンカータグを検索することになるので、無駄な処理（ループ回数）が増えてしまいます。

アンカータグが見つかったら、カレントページの URL と完全一致するかチェックします。
一致したアンカータグには 'current' クラスを新規追加しつつ、リンク先 URL 無効･･･ということをやってます。

上記マークアップの場合、CSS だと以下のようになります。

  1. #navibar ul li a.current {
  2.     font-weight: 700;
  3.     background-color: #393f4c;
  4. }

よかったらお試しください (￣∇￣)/

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード