Webデザイナーブログから学ぶホームページ制作

ホームページを閲覧した時に、グローバルナビゲーションが沢山あるとサイト内でどのページにを開いているのか分からなくなりユーザーの離脱の原因につながるおそれもあります。グローバルナビゲーションはユーザーにとって分かりやすく設計することが大切です。
「JavaScript」を使うことによって、グローバルナビゲーションをクリックしたら現在地のメニューの色や画像が変わる設定ができます。
案内役としての役割をこなすグローバルナビゲーションですが、ユーザーが今どこの階層ページにいるのか、現在地を教えてあげる「JavaScript」の設定方法を解説します。

下記からjQueryライブラリのダウンロードを行ってください。
jQueryライブラリダウンロード

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

<script type="text/javascript" src="/sample/002/jquery.js"></script>
<script type="text/javascript" src="/sample/002/menu.js"></script> 

html内にグローバルメニューを作成して下さい。
グローバルメニュー作成時に、以下のメニュー画像を作成してください。

navi_01.jpg
navi_01_on.jpg
navi_02.jpg
navi_02_on.jpg
navi_03.jpg
navi_03_on.jpg

※「navi_01.jpg」は、初期のメニュー画像
※「navi_01_on.jpg」は、現在表示しているページのメニュー画像

<div class="navi_menu">
<ul>
<li class="first"><a href="/sample/002/index.php"><img src="/sample/002/img/navi_01.jpg" alt="ホーム" /></a></li>
<li class="second"><a href="/sample/002/menu01/index.php"><img src="/sample/002/img/navi_02.jpg" alt="メニュー01" /></a></li>
<li class="third"><a href="/sample/002/menu02/index.php"><img src="/sample/002/img/navi_03.jpg" alt="メニュー02"/></a></li>
</ul>
</div>

「jQuery」ファイルへのディレクトリをメタタグに記述します。

$(document).ready(function(){
　　//パス取得
　　path = location.pathname

　　if(path.match("/sample/002/index.php")){
　　　　$(".navi_menu .first img").remove()
　　　　$(".navi_menu .first").prepend('<a href="/sample/002/index.php"><img src="/sample/002/img/navi_01_on.jpg" alt="ホーム" /></a>')
　　}else if(path.match("/sample/002/menu01/index.php")){
　　　　$(".navi_menu .second img").remove()
　　　　$(".navi_menu .second").prepend('<a href="/sample/002/menu01/index.php"><img src="/sample/002/img/navi_02_on.jpg" alt="メニュー01" /></a>')
　　}else if(path.match("/sample/002/menu02/index.php")){
　　　　$(".navi_menu .third img").remove()
　　　　$(".navi_menu .third").prepend('<a href="/sample/002/menu02/index.php"><img src="/sample/002/img/navi_03_on.jpg" alt="メニュー01" /></a>')
　　}
})

実装サンプルを作りましたのでこちらでも確認してみてください。
グローバルナビゲーション デモ

以上で設定完了となりますが、簡単に設定ができますね。
グローバルナビゲーションはデザイナーさんによって見せ方が表現の仕方が全く違います。
モバイルフレンドリーの時代なのでスマートフォンを考えたユーザービリティづくりが必要です。ユーザーが各デバイスから見ても使いやすいグローバルナビゲーションを設定してみてください。