エントリー本文
ナビゲーションバー・シンプルタイプ（その3：クリック時のロールオーバーを追加）
Category：[CSS]
Tag：[Customize, MovableType, NavigationBar, Rollover]
前回までのカスタマイズで、マウス・カーソルをリンクにポイントした時のロールオーバーを、ページ遷移しても保持するところまでできましたが、リンクをクリックしてからページが変わるまでの挙動までは制御できていません。
例えばリンクをクリックした後、マウス・カーソルをリンクから外すとロールオーバーが解除されてしまいます。またクリックしてからページが変わるまでの間、以前のロールオーバーが保持されているため、リンクを確実にクリックしたという事実が視覚的に反映されていません。
ということで、この回ではクリック後からページ遷移までのロールオーバー保持と、クリック時に他のロールオーバーを解除するためのカスタマイズを行います。
１．テンプレートの設定（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 追記
デッドリンクを修正しました。
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）
- Highslide JS でサムネイル画像を拡大表示する（設定方法の変更）
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション（その1：基本スタイル）
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する（2カラム版）
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける（ドロップシャドウ）
- IE7 の CSS ハック
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
小枠空間 様
はじめまして、ここ最近から[MovableType]を始めたCHRISといいます。
こちらのサイトを参考にして勉強しております。
ありがとうございます。
今回コメントをしたのは、挨拶とカスタマイズの
質問です。
質問内容は「ナビゲーションバー」についてです。
ナビゲーションバー自体は作れたのですが、ナビゲーションバーにあるコンテンツ（ホーム、About,Profile,Link等）の各記事をどのようにして編集しているのかなと思いました。
普段、記載しているように「新規エントリー」でナビゲーションバーのコンテンツを編集ってできるのでしょうか？
私の方でも情報探してみますのでよろしくお願いします。
＞CHRISさん
はじめまして。
記事参照ありがとうございます。
ご質問の件ですが、
のエントリーを参照いただけますでしょうか。
うまく検索できる手段が提供できておらず申し訳ありません。
以上です。
それではどうぞよろしくお願い致します。
yujiro様
コメントどうもありがとうございました。
早速エントリーを参照しこれから試してみますね。
ありがとうございます。
＞CHRISさん
こんばんは。
ご連絡ありがとうございました。
ご不明な点がございましたらご連絡ください。
ではでは！
サンプルリストがデッドリンクになっているようです。よろしくお願いします。
＞mdotさん
こんばんは。
ご連絡ありがとうございました。
修正致しましたのでご確認ください。
それではよろしくお願い致します。
いつもサイトを参考にさせて頂いております。
上記はテキストの場合のロールオーバー保持ですが、画像の場合も可能なのでしょうか。
試してみたのですが上手く行かなかったのでコメントさせて頂きました。
現在ナビゲーションバー背景に画像を使い、オンマウスで画像が変わるようにしてあります。
画像はＣＳＳで変更する指定をしているのでノーマル時とクリック時の画像を一枚画像で作成しています。
こういった場合、上記のようにロールオーバー保持は可能でしょうか。
質問が分かりづらかったり、ここでコメントする事ではなかったら申し訳ありません。
アドバイスいただけると幸いです。
お願い致します。
＞MOMOさん
こんばんは。
ご返事遅くなってすいません。
ロールオーバー保持は可能だと思いますが、詳しい方法がお知りになりたい場合、設定した状態でサイトのURLをご連絡頂ければもう少し適切なご返答ができると思います。
それではよろしくお願いいたします。
