WEB屋になる為の知識と技術と情報(WEBデザイナーブログ)

ユーザーにとって親切なグローバルメニュー。
現在表示中のページがどこか分かりやすくする為に、グローバルメニューの画像やリンクを色や画像の変更によって分かり易くしているホームページを見たことがあると思います。
見ているページがどこのメニューなのか、どこのカテゴリなのかが分かるのは、ユーザーにとって親切です。


サンプルページはこちら

今回はグローバルメニューのURL・ディレクトリを取得した画像の切り替え【jquery】の設定方法をご紹介したいと思います。

　1. 「jQuery」ファイルをダウンロード
　2. 「jQuery」ファイルルートをメタタグに記載
　3. グローバルメニューを記載
　4. 「jQuery」ファイルの記載

下記のサイトから「jQuery」ファイルをダウンロードします。

▼jQuery サイト
jQuery
最初に「jQuery」ファイルへのディレクトリをメタタグに記載をしてください。
※サンプルで「グローバルナビ」ファイルを「menu.js」と記載いたします。
※「menu.js」ファイルの内容は下記で後ほど掲載いたします。

【メタタグに記述】

次にhtml内にグローバルメニューを作成して下さい。
グローバルメニュー作成時に、画像は「navi_01.jpg」のメニュー画像と「navi_02_on.jpg」のメニュー画像を作成して下さい。
※「navi_01.jpg」は、初期のメニュー画像
※「navi_02_on.jpg」は、現在表示しているページのメニュー画像

【html内にグローバルメニューを作成】

次に「jQuery」ファイルに下記の内容を記載して下さい。

【jQuery内にスクリプトを作成】

$(document).ready(function(){
　　//パス取得
　　path = location.pathname
 
　　if(path.match("/index.php")){
　　　　$(".navi_menu .first img").remove()
　　　　$(".navi_menu .first").prepend('')
　　}else if(path.match("/about/index.php")){
　　　　$(".navi_menu .second img").remove()
　　　　$(".navi_menu .second").prepend('')
　　}else if(path.match("/company/index.php")){
　　　　$(".navi_menu .third img").remove()
　　　　$(".navi_menu .third").prepend('')
　　}
})

以上で設定完了です。

※スクリプトが動かない場合はJavaScriptファイルの設定場所、html記載内容を最後ご自分のwebサイトに合わせてご確認してみて下さい。