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

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

Posted at April 26,2005 8:45 PM
Tag:[Customize, MovableType, NavigationBar, Rollover]

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

1.テンプレートの設定

各テンプレートに対し、前回設定したナビゲーションバーに 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>

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

2.スタイルシートの設定

こちらも前回設定した 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" と同じ内容になるように設定してください。
設定が完了したら保存・再構築します。

3.ロールオーバー保持の設定

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

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

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

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

対象のインデックステンプレートに設定されたナビゲーションバーの、特定の 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セレクタを他の用途ですでに定義されている場合は名称を適宜変更してください。

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

まずナビゲーションバーの 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ですが、アルファベットで開始するようにしてください。

4.ロールオーバー保持の設定(カテゴリーアーカイブページとの連携)

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

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

次に3.2項の前半と同様、ナビゲーションバーの 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 追記
サンプルリストのリンク表示を修正しました。

関連記事
トラックバックURL


トラックバック

メニューバーのカスタマイズ from ELECTRICSHEEPdogs!
タイトル下のメニューをクリックした時、各メニューが選択されていることがわかりやす... [続きを読む]

Tracked on April 27, 2005 7:35 PM

MTでカテゴリーごとのナビゲーションバー作成 from 独自ブログ作成法
TypePadやココログからMT(MovableType)に移行しようと、模索中 [続きを読む]

Tracked on July 24, 2007 12:01 AM

MTでカテゴリーごとのナビゲーションバー作成 from 独自ブログ作成法
■現在位置のタブだけ色を変えたい! MTタグで作る方法を見たが、それだとホーム [続きを読む]

Tracked on July 24, 2007 10:49 AM
コメント

すっかり参考にさせてもらっています。

この「ロールオーバー保持」もアクション自体は何とか出来たようなのですが、
『日付ベースのアーカイブの再構築に失敗しました』となり日別アーカイブの再構築できません。
Error in tag: You used outside of the proper context.
とでます。
他には"MTCategoryDescription"を使ってないつもりなのですが、どうしたもんなんでしょうか。。

[1] Posted by うめ : September 29, 2005 5:46 AM

>うめさん
こんばんは。
ご利用ありがとうございます。
ご質問の件につきまして、具体的な設定状況が不明なので推測の域を超えませんが、MTCategoryDescription を日付アーカイブテンプレートで使われていないでしょうか(後半の「他には?」というくだりが「日付アーカイブテンプレートで使っていない」という意味でしたらご容赦ください)。

以上です。
それではよろしくお願い致します。

[2] Posted by yujiro : September 30, 2005 1:31 AM

回答ありがとうございます。

やはりダメです。。
MTCategoryDescription は日付アーカイブテンプレートを含めどこでも使っていません。

もう少し詳しく書きますと、
ナビゲーションバーをモジュール化して各テンプレートに置いています。
で、カテゴリー・アーカイブテンプレートの上記タグのすぐ下に、指定のjavascriptを置いています。そこで「すべての再構築」すると、

エラーが発生しました:
日付ベースのアーカイブ「Daily20051001000000」の再構築に失敗しました: テンプレート カテゴリー・アーカイブ の再構築に失敗しました: Error in <MTCategoryDescription> tag: You used <$MTCategoryDescription$> outside of the proper context.

と表示されてしまいます。
個別に再構築していくと『日別アーカイブだけ』で上記のメッセージがでます。他のページは問題なく再構築可能です。
ちなみに、ロールオーバーの機能は問題なく機能しています。

長くなりましたが、以上が問題の概要です。
宜しくお願いします。

[3] Posted by うめ : October 1, 2005 9:53 AM

>うめさん
こんばんは。
ご質問の件ですが、エラーからすると MTCategoryDescription が日別アーカイブ(=日付アーカイブテンプレート)に存在するように思われます。
原因の切り分けが必要ですが、「指定のJavaScript」をテンプレートから一旦外して再構築されるとどうなるでしょうか。

また、管理メニューの「ウェブログの設定」→「アーカイブの設定」で、カテゴリーアーカイブテンプレートが日別アーカイブとして誤って設定されていないでしょうか。

以上です。
それではどうぞよろしくお願い致します。

[4] Posted by yujiro : October 2, 2005 1:11 AM

回答ありがとうございます。

日別アーカイブテンプレートにはMTCategoryDescriptionは一つもありません。試しに、一気に body ~ /body までを削除して再構築してみましたが、結果は同じです。
カテゴリーアーカイブテンプレートに貼り付けてある、「指定のJavaScript」を削除すると問題なく再構築は出来ますが、もちろんロールオーバー保持は機能しなくなります。
また、「アーカイブの設定」での「カテゴリー別」(アーカイブの種類)は「カテゴリー・アーカイブ」(テンプレート)だけです。ちなみにアーカイブ・ファイルのテンプレート の欄にはcat_<$MTArchiveCategory dirify="1"$>.phpが入っています。

イヤ?、困りました。。

[5] Posted by うめ : October 2, 2005 3:21 AM

>うめさん
こんばんは。
「日別アーカイブ」の設定はいかがでしょうか?

[6] Posted by yujiro : October 4, 2005 1:16 AM

どもです。毎度すいません。

「アーカイブの設定」での「日別」(アーカイブの種類)では『カテゴリー・アーカイブ』の「アーカイブ・ファイルのテンプレート 』は空欄、『日付アーカイブ』には"<$MTArchiveDate format="%Y/%m/%d"$>-index.php"が入っています。
ちなみに、『日付アーカイブ』の「優先」にチェック入り。
ってな感じです。

[7] Posted by うめ : October 4, 2005 2:46 PM

>うめさん
こんにちは。

「アーカイブの種類」欄で「日別」のところにある「カテゴリー・アーカイブ」は不要なものですので、「カテゴリー・アーカイブ」の右側にあるチェックボックスにチェックして、削除・再構築してみてください。これで正常に動作すると思います。

原因は、日別アーカイブにカテゴリーアーカイブテンプレートが関連付けをされていたため(上にあるフォームのボタンを誤ってクリックしてしまうとこのような状態になります)、カテゴリーアーカイブテンプレートにある MTCategoryDescription を読み込んでしまっていたと思われます。参考までに「優先」というのは、同じアーカイブページに複数のテンプレートを適用している場合、他のページ(例えばトップページ)からどちらのアーカイブへのリンクを設定するかを決定するものです。

ちなみに前のコメントで「カテゴリーアーカイブテンプレートが日別アーカイブとして誤って設定されていないでしょうか。」という質問は、このことを指しておりました。

以上です。
それではよろしくお願い致します。

[8] Posted by yujiro : October 4, 2005 3:40 PM

どもです。

「日別」のところにある「カテゴリー・アーカイブ」を削除したら、問題解除されました。
ありがとうございました。

機能の意味をきちんと把握しないで使っているとこういう事が起きるのですね。
一つ開けた感じです。
感謝です。

[9] Posted by うめ : October 6, 2005 2:43 AM

>うめさん
こんばんは。
ご連絡ありがとうございました。

なおったようでなによりです。
ではでは!

[10] Posted by yujiro : October 7, 2005 1:09 AM

こんにちは。はじめまして。
質問させてください。
その1、その2、その3 を適用しています。
カテゴリーをナビゲーションバーのメニューとして設定しているケースで、MTCategoryDescriptionをつかった方法を適用しています。
サイドのカテゴリーツリーからナビゲーションバーの項目を選んだ際は問題ないのですが、ナビゲーションバーの項目以外のカテゴリーを選ぶと、ページの表示は問題ないのですが、ステータスバーに「実行しましたがページでエラーが発生しました」というエラーが出ます。
javascriptに無知なため、原因がわからなくて困っています。
ちなみに、モジュール化は一切していない状態です。

[11] Posted by Katze : November 7, 2005 1:30 AM

すみません。HPアドレス間違えました。
訂正します。

[12] Posted by Katze : November 7, 2005 1:42 AM

>Katzeさん
はじめまして。
ご利用ありがとうございます。

ご質問の件ですが、エラー処理がもれておりました。考慮不足で申し訳ありません。本文の方も修正しましたが、

node.parentNode.setAttribute("id","selected");

if (node) {     node.parentNode.setAttribute("id","selected"); }

に修正してください。

以上です。
それではどうぞよろしくお願い致します。

[13] Posted by yujiro : November 7, 2005 9:15 PM

こんにちは。
さっそくの対応、ありがとうございました。
私のjavascriptに対する無知さをさらけ出してしまってお恥ずかしい限りです(照

それではこれからもよろしくお願いします。

[14] Posted by Katze : November 7, 2005 9:39 PM

>Katzeさん
こんばんは。
こちらこそ失礼致しました。
また何かございましたらご連絡ください。
こちらこそ今後ともどうぞよろしくお願い致します。

[15] Posted by yujiro : November 8, 2005 12:39 AM

リストタグを使って、ロールオーバーメニューを作りました。
ここまではうまくいったのですが、クリックした後保持させる方法がわかりません。
上記は、リストタグを使用されていない場合のようですが、リストタグを使用している場合はどのように設定をすればよいのでしょうか?

[16] Posted by いちご : August 5, 2008 5:03 PM

>いちごさん
こんばんは。
ご返事遅くなってすいません。
リストタグ(ul/li)であれば、id属性をli要素に設定すればいいかと思います。どのように設定されているのか分からないので、うまくできない場合はナビゲーションを設置しているURLをご連絡ください。
それではよろしくお願い致します。

[17] Posted by yujiro logo : August 16, 2008 11:52 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)