TopCSS > 2005年4月
2005年4月27日

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

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

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

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 追記
デッドリンクを修正しました。

Comments [8] | Trackbacks [0]
2005年4月26日

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

「その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 追記
サンプルリストのリンク表示を修正しました。

Comments [17] | Trackbacks [3]
2005年4月25日

ナビゲーションバー・シンプルタイプ(その1:基本スタイル)

最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー(メニューバー)を作ってみました。まずは div タグと a タグを用いたシンプルなタイプです。これは今日の覚え書きさんのオサレなメニューバーを作ろう経由の

Accessify.comlist o matic

をベースにしています。このナビゲーションバーを使って3回に分けてカスタマイズ方法をお送りしたいと思います。

1.テンプレートの設定

まずメニューとなる下記のHTMLタグ(青色)をバナーの下に設定します。

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
 
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

設定したらテンプレートを保存・再構築します(この段階ではまだスタイルが設定されていないので整形された状態で表示されません)。URLやメニュータイトルは適宜修正してください。区切り線は "|" を使ってますが、半角空白や他のマークでも構いません。img タグで画像を配置することも可能です。

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

次に下記のナビゲーションバー用スタイルを styles-site.css に追加します。

/* ナビゲーションバー全体のスタイル */
#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; /* テキストの装飾をなくす */
}

こちらも設定が完了したら保存・再構築します。それぞれの設定の主な役割をコメントで記していますので、適宜カスタマイズしてお使いください。設定がうまくできれば下記のメニューが表示されます(イメージは"Search"を選択している状態です)。

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

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

Comments [44] | Trackbacks [10]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3