小粋空間  -  a cheap joke and a play on words site

ナビゲーションバー・シンプルタイプ（その2：クリックしたメニューのロールオーバーを保持する）

「その2」は、ナビゲーションバーにあるメニューをクリックした時、ジャンプしたページでクリックされたメニューのロールオーバーを保持、つまり選択された状態を保持するというカスタマイズです。このカスタマイズによって現在表示されているページとメニューの関連性がより明確になり、ユーザビリティを向上させることができます。
久しぶりに濃厚な内容です。

１．テンプレートの設定

各テンプレートに対し、前回設定したナビゲーションバーに span タグ（青色）を追加します。「各テンプレート」というのは、厳密にはロールオーバーを保持したいテンプレートだけが対象です。
ナビゲーションバーをモジュール化している場合は気にせず span タグを付与してください。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link">Link</a></span> |
<span><a href="<$MTBlogURL$>search.html" title="Search">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a></span>
</div>

設定したらテンプレートを保存・再構築します。

２．スタイルシートの設定

こちらも前回設定した styles-site.css のナビゲーションバー用スタイルの下に、保持状態表示用のIDセレクタ "selected" を追加します。

/* ナビゲーションバー全体のスタイル */
#navbar {
    text-align: center; /* 配置 */
    font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
    font-weight: normal; /* フォントの太さ */
    font-size: 12px; /* フォントサイズ */
    width: auto; /* 全体の幅 */
    line-height: 150%; /* テキストの高さ */
}
 
/* リンクのスタイル */
#navbar a{
    background-color: #ffffff; /* 背景色 */
    color:#666666; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
}
 
/* リンクをポイントした時のスタイル */
#navbar a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    text-decoration: none; /* テキストの装飾をなくす */
}
 
/* 選択されたリンクのスタイル */
#selected a,
#selected a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
    text-decoration: none; /* テキストの装飾をなくす */
}

配色を変更する場合は、IDセレクタ "selected" の配色が、リンクをポイントした時のIDセレクタ "#navbar a:hover" と同じ内容になるように設定してください。
設定が完了したら保存・再構築します。

３．ロールオーバー保持の設定

テンプレートに対してロールオーバーを保持する設定を行います。ここではナビゲーションバーを

1. 各ページにスタティックに、つまり直接設定している場合
2. モジュール化している場合

の2つのケースについて説明します。1の場合はロールオーバーを保持したいインデックス・テンプレートに対してのみ実施すればOKです。
なお、この項ではいずれも1つのメニューに対して1つのインデックス・テンプレート（から生成されたHTMLページ）が対応している場合のカスタマイズについて述べています。カテゴリーアーカイブから生成されたアーカイブページをメニューに適用している場合については４項を参照してください。インデックス・テンプレートとカテゴリーアーカイブページを併用し、いずれもロールオーバー保持の対象にする場合は３項・４項の設定が必要です。

３．１　ナビゲーションバーを各ページにスタティックに設定している場合

対象のインデックステンプレートに設定されたナビゲーションバーの、特定の span タグに id属性を追加します。例えば "Search" ページを開いた時にナビゲーションの "Search" をロールオーバー状態にするには、テンプレート「Search.html」にあるナビゲーションバーの Search に対応する span タグに id属性（青色部分）を追加します。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link">Link</a></span> |
<span id="selected"><a href="<$MTBlogURL$>search.html" title="Search">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a></span>
</div>

これと同様の作業を、ナビゲーションバーを設定している（かつロールオーバーを保持したい）各テンプレートに対して実施します。Home ページでは

<span id="selected"><a href="http://.../" title="Home">Home</a></span> |

About のページでは

<span id="selected"><a href="http://.../about.html" title="About">About</a></span> |

と、表示するページに対応する a タグに "selected" を付与します。保持したくないページについてはこの設定を行わなければOKです。
"selected" というIDセレクタを他の用途ですでに定義されている場合は名称を適宜変更してください。

３．２　ナビゲーションバーをモジュール化している場合

まずナビゲーションバーの a タグに id 属性（青色部分）を追加し、赤色で示した id 属性名を設定します。ここでは全ての a タグに設定していますが、保持する必要がないリンクについては設定不要です。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home" id="Home">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About" id="About">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile" id="Profile">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link" id="Link">Link</a></span> |
<span><a href="<$MTBlogURL$>search.html" title="Search" id="Search">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail" id="Mail">Mail</a></span>
</div>

注：id 属性名はHTMLページで一意でなければなりません。

次に、ナビゲーションバーの直下に JavaScript を追加します。厳密に言うと、モジュールのテンプレートに JavaScript を追加するのではなく、ナビゲーションバー用モジュールをインクルードしているテンプレートに追加します。先の例と同様、"Search" をロールオーバー状態にするには、テンプレート「Search.html」にあるナビゲーションバーをインクルードしている直下にJavaScript（青色部分）を追加します。赤色部分の "Search" がナビゲーションバーの "Search" をロールオーバー状態にするためのキーとなります。

<? readfile('Search.html'); ?>
 
<script type="text/javascript" language="javascript">
var node = document.getElementById("Search");
node.parentNode.setAttribute("id","selected");
</script>

これと同様の作業を、ナビゲーションバーを設定した各テンプレートに対して実施します。赤色部分は,
Home 用テンプレートでは "Home"、About 用テンプレートでは "About" と、先のナビゲーションバーの a タグに設定した特定の id 属性名と一致するよう、適宜置き換えてください。保持したくないページは JavaScript 自体を設定しないでください。
id 属性名はHTMLページで一意になっていれば何でもOKですが、アルファベットで開始するようにしてください。

４．ロールオーバー保持の設定（カテゴリーアーカイブページとの連携）

一つないし複数のカテゴリーをナビゲーションバーのメニューとして設定されているケースも少なくないと考えられますが、この場合「カテゴリーアーカイブテンプレート」という同一のテンプレートを用いているため、先の方法は適用できません。
ということで、MTCategoryDescription を用いてロールオーバーを保持する方法をご紹介します。動作としては、MTCategoryDescription に設定された文字列を id 属性として用い、カテゴリーアーカイブに設定したJavaScriptにその値を渡すことで、対応するメニューをロールオーバー状態にするという作戦です。MTCategoryDescription がカテゴリーリスト表示等で用いられていないことが前提となりますのでご注意ください。

まず、管理メニューの「カテゴリー」で、ナビゲーションバーに設定しているカテゴリーを選択し、そのカテゴリーの「カテゴリー説明」欄にアルファベットで開始する任意の文字列を設定します。例えば「プロフィール」カテゴリーには「Profile」と設定します。
設定が終わったら保存・再構築します。

次に３．２項の前半と同様、ナビゲーションバーの a タグに id 属性を追加します。ここでの注意点ですが、id 属性には「カテゴリーの説明」で設定した文字列と同じものをそれぞれ設定してください。

最後にカテゴリーアーカイブに下記の JavaScript を設定します。赤色部分がミソ（←最近使いませんね）です。

<? readfile('Search.html'); ?>
 
<script type="text/javascript" language="javascript">
var node = document.getElementById("<$MTCategoryDescription$>");
if (node) {
    node.parentNode.setAttribute("id","selected");
}
</script>

以上です。

それぞれの設定がうまくできていれば、クリックしたメニューがジャンプ先のページでロールオーバーになっていると思います。下のイメージは"Search"をクリックしてジャンプしたSearchページのナビゲーションバーの状態です（「前回の使い回し」とか言わない）。

ご自身でナビゲーションバーをカスタマイズされる場合、ロールオーバーを保持する際に適用するスタイルはクラスセレクタ（.）では反応しませんので、サンプルのようにIDセレクタ（#）で定義してください。これはIDセレクタの定義がクラスセレクタの定義より優先されるためです。

その1：基本スタイル

その2：クリックしたメニューのロールオーバーを保持する

その3：クリック時のロールオーバーを追加

2005.11.07 追記
カテゴリーアーカイブを利用する場合のスクリプトを修正しました。

2005.12.18 追記
サンプルリストのリンク表示を修正しました。