2021.12.2|JavaScript

現在居るページが分かる画像切り替えグローバルナビゲーション「JavaScript」の設定方法

現在居るページが分かる画像切り替えグローバルナビゲーション「JavaScript」の設定方法

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

グローバルナビゲーションをクリックしたら現在地のメニュー色が変わる設定方法

1.jQueryライブラリをダウンロード

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

2.htmlファイル内に記述

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

htmlファイルに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>

3.JavaScriptファイル内に記述

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

JavaScriptを作成
$(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>')
  }
})

実装サンプル

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

まとめ

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