ナビゲーションバー・シンプルタイプ(その3:クリック時のロールオーバーを追加)

ナビゲーションバー・シンプルタイプ(その3:クリック時のロールオーバーを追加)

Posted at April 27,2005 11:11 PM
Tag:[Customize, MovableType, NavigationBar, Rollover]

前回までのカスタマイズで、マウス・カーソルをリンクにポイントした時のロールオーバーを、ページ遷移しても保持するところまでできましたが、リンクをクリックしてからページが変わるまでの挙動までは制御できていません。
例えばリンクをクリックした後、マウス・カーソルをリンクから外すとロールオーバーが解除されてしまいます。またクリックしてからページが変わるまでの間、以前のロールオーバーが保持されているため、リンクを確実にクリックしたという事実が視覚的に反映されていません。

ということで、この回ではクリック後からページ遷移までのロールオーバー保持と、クリック時に他のロールオーバーを解除するためのカスタマイズを行います。

1.テンプレートの設定(onclick属性追加)

ナビゲーションバーの各 a タグに JavaScript を起動するための onclick 属性を追加します。

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

赤色部分はそれぞれの id 属性値と同じ文字列を設定します。モジュール化の有無に関係なくこの設定を行います。カテゴリーアーカイブの場合も文字列を直接設定してください。

2.テンプレートの設定(JavaScript追加)

ナビゲーションバーを適用しているテンプレートの <head> ? </head> の間に下記のスクリプトを設定します。

<script type="text/javascript" language="javascript">
<!--
function changeLinkStyle(name){
    var node;
    var list = new Array(5);
    list[0] = "Home";
    list[1] = "About";
    list[2] = "Profile";
    list[3] = "Link";
    list[4] = "Search";
    for (i = 0; i < list.length; i++) {
        node = document.getElementById(list[i]);
        if (name == list[i]) {
           node.parentNode.setAttribute("id","selected");
        } else {
           node.parentNode.setAttribute("id","navbar");
        }
    }
}
//-->
</script>

赤色部分のタイトルに該当する部分は id 属性名を設定します。また数字の部分は設定しているリンク数によって変更する必要があります。

var list = new Array(5);

は「設定したいメニュー数 - 1」を設定します。例では5つのメニューがあるので設定値は「4」となります。
その下にある

list[0] = "Home";
list[1] = "About";
list[2] = "Profile";
list[3] = "Link";
list[4] = "Search";

も設定したいメニュー数分用意します。例えばメニューをもうひとつ増やしたい場合は、

list[5] = "hogehoge";

と、カッコ部分の数字を増やした状態で追加します。
なお、ここではJavaScriptをHTMLに直接設定していますが、外部ファイルにしても構いません。

参考.クリック状態で別のスタイルを使う

ここまでの設定で、リンクをクリックしてからページが遷移するまでロールオーバーを保持することができました。一応これで完成ですが、別のスタイルをもうひとつ追加して、リンクをクリックした時に適用させることで「クリックされた」状態をさらに明確に表示することもできます。

まず、上記のJavaScriptの下記のように変更します。

<script type="text/javascript" language="javascript">
<!--
function changeLinkStyle(name){
    var node;
    var list = new Array(5);
    list[0] = "Home";
    list[1] = "About";
    list[2] = "Profile";
    list[3] = "Link";
    list[4] = "Search";
    for (i = 0; i < list.length; i++) {
        node = document.getElementById(list[i]);
        if (name == list[i]) {
           node.parentNode.setAttribute("id","selectedclicked");
        } else {
           node.parentNode.setAttribute("id","navbar");
        }
    }
}
//-->
</script>

あとはクリックされた時に適用するスタイル(下記)を styles-site.css に追加します。

/* クリックされたリンクのスタイル */
#clicked a,
#clicked a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
    text-decoration: none; /* テキストの装飾をなくす */
    position:relative; top:1px; left:1px; /* リンクをずらす */
}

サンプルでは同じ配色でリンクを右下方向に 1px ずらす設定を行っています。

これまでの設定をまとめたサンプルを配置しましたのでお試し頂ければ幸いです。HTTPレスポンスが早いと今回のカスタマイズの効果が分かりにくいのですが、その点は予めご容赦ください。
また全体的にもう少し良い実装があるかもしれませんので、色々試してみてください。

その1:基本スタイル
その2:クリックしたメニューのロールオーバーを保持する
その3:クリック時のロールオーバーを追加

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

2006.10.09 追記
デッドリンクを修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

 小枠空間 様
はじめまして、ここ最近から[MovableType]を始めたCHRISといいます。

こちらのサイトを参考にして勉強しております。
ありがとうございます。

今回コメントをしたのは、挨拶とカスタマイズの
質問です。

質問内容は「ナビゲーションバー」についてです。
ナビゲーションバー自体は作れたのですが、ナビゲーションバーにあるコンテンツ(ホーム、About,Profile,Link等)の各記事をどのようにして編集しているのかなと思いました。
普段、記載しているように「新規エントリー」でナビゲーションバーのコンテンツを編集ってできるのでしょうか?

私の方でも情報探してみますのでよろしくお願いします。

[1] Posted by CHRIS : August 28, 2005 7:55 PM

>CHRISさん
はじめまして。
記事参照ありがとうございます。

ご質問の件ですが、

のエントリーを参照いただけますでしょうか。
うまく検索できる手段が提供できておらず申し訳ありません。

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

[2] Posted by yujiro : August 29, 2005 1:19 AM

yujiro様

コメントどうもありがとうございました。
早速エントリーを参照しこれから試してみますね。

ありがとうございます。

[3] Posted by CHRIS : August 29, 2005 2:28 PM

>CHRISさん
こんばんは。
ご連絡ありがとうございました。
ご不明な点がございましたらご連絡ください。

ではでは!

[4] Posted by yujiro : August 30, 2005 12:23 AM

サンプルリストがデッドリンクになっているようです。よろしくお願いします。

[5] Posted by mdot : October 9, 2006 12:48 AM

>mdotさん
こんばんは。
ご連絡ありがとうございました。
修正致しましたのでご確認ください。
それではよろしくお願い致します。

[6] Posted by yujiro : October 9, 2006 9:07 PM

いつもサイトを参考にさせて頂いております。
上記はテキストの場合のロールオーバー保持ですが、画像の場合も可能なのでしょうか。
試してみたのですが上手く行かなかったのでコメントさせて頂きました。

現在ナビゲーションバー背景に画像を使い、オンマウスで画像が変わるようにしてあります。
画像はCSSで変更する指定をしているのでノーマル時とクリック時の画像を一枚画像で作成しています。
こういった場合、上記のようにロールオーバー保持は可能でしょうか。

質問が分かりづらかったり、ここでコメントする事ではなかったら申し訳ありません。

アドバイスいただけると幸いです。
お願い致します。

[7] Posted by MOMO : August 3, 2007 4:17 PM

>MOMOさん
こんばんは。
ご返事遅くなってすいません。
ロールオーバー保持は可能だと思いますが、詳しい方法がお知りになりたい場合、設定した状態でサイトのURLをご連絡頂ければもう少し適切なご返答ができると思います。
それではよろしくお願いいたします。

[8] Posted by yujiro : August 13, 2007 9:56 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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