ナビゲーションバー・シンプルタイプ（その3：クリック時のロールオーバーを追加）
前回までのカスタマイズで、マウス・カーソルをリンクにポイントした時のロールオーバーを、ページ遷移しても保持するところまでできましたが、リンクをクリックしてからページが変わるまでの挙動までは制御できていません。
例えばリンクをクリックした後、マウス・カーソルをリンクから外すとロールオーバーが解除されてしまいます。またクリックしてからページが変わるまでの間、以前のロールオーバーが保持されているため、リンクを確実にクリックしたという事実が視覚的に反映されていません。
ということで、この回ではクリック後からページ遷移までのロールオーバー保持と、クリック時に他のロールオーバーを解除するためのカスタマイズを行います。
１．テンプレートの設定（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 属性値と同じ文字列を設定します。モジュール化の有無に関係なくこの設定を行います。カテゴリーアーカイブの場合も文字列を直接設定してください。
２．テンプレートの設定（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 追記
デッドリンクを修正しました。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
小枠空間 様
はじめまして、ここ最近から[MovableType]を始めたCHRISといいます。
こちらのサイトを参考にして勉強しております。
ありがとうございます。
今回コメントをしたのは、挨拶とカスタマイズの
質問です。
質問内容は「ナビゲーションバー」についてです。
ナビゲーションバー自体は作れたのですが、ナビゲーションバーにあるコンテンツ（ホーム、About,Profile,Link等）の各記事をどのようにして編集しているのかなと思いました。
普段、記載しているように「新規エントリー」でナビゲーションバーのコンテンツを編集ってできるのでしょうか？
私の方でも情報探してみますのでよろしくお願いします。
＞CHRISさん
はじめまして。
記事参照ありがとうございます。
ご質問の件ですが、
のエントリーを参照いただけますでしょうか。
うまく検索できる手段が提供できておらず申し訳ありません。
以上です。
それではどうぞよろしくお願い致します。
yujiro様
コメントどうもありがとうございました。
早速エントリーを参照しこれから試してみますね。
ありがとうございます。
＞CHRISさん
こんばんは。
ご連絡ありがとうございました。
ご不明な点がございましたらご連絡ください。
ではでは！
サンプルリストがデッドリンクになっているようです。よろしくお願いします。
＞mdotさん
こんばんは。
ご連絡ありがとうございました。
修正致しましたのでご確認ください。
それではよろしくお願い致します。
いつもサイトを参考にさせて頂いております。
上記はテキストの場合のロールオーバー保持ですが、画像の場合も可能なのでしょうか。
試してみたのですが上手く行かなかったのでコメントさせて頂きました。
現在ナビゲーションバー背景に画像を使い、オンマウスで画像が変わるようにしてあります。
画像はＣＳＳで変更する指定をしているのでノーマル時とクリック時の画像を一枚画像で作成しています。
こういった場合、上記のようにロールオーバー保持は可能でしょうか。
質問が分かりづらかったり、ここでコメントする事ではなかったら申し訳ありません。
アドバイスいただけると幸いです。
お願い致します。
＞MOMOさん
こんばんは。
ご返事遅くなってすいません。
ロールオーバー保持は可能だと思いますが、詳しい方法がお知りになりたい場合、設定した状態でサイトのURLをご連絡頂ければもう少し適切なご返答ができると思います。
それではよろしくお願いいたします。
