現在居るページが分かる画像切り替えグローバルメニュー jQuery「menu.js」
20.02.13 23:38 | コメント(0)
現在ページを分かる画像変換JavaScript
現在表示中のページがどこか分かりやすくする為に、グローバルメニューの画像やリンクを色や画像の変更によって分かり易くしているホームページを見たことがあると思います。
見ているページがどこのメニューなのか、どこのカテゴリなのかが分かるのは、ユーザーにとって親切です。
サンプルページ

サンプルページはこちら
今回はグローバルメニューのURL・ディレクトリを取得した画像の切り替え【jquery】の設定方法をご紹介したいと思います。
1. 「jQuery」ファイルをダウンロード
2. 「jQuery」ファイルルートをメタタグに記載
3. グローバルメニューを記載
4. 「jQuery」ファイルの記載
「jQuery」ファイルをダウンロード
▼jQuery サイト
jQuery
「jQuery」ファイルルートをメタタグに記載
※サンプルで「グローバルナビ」ファイルを「menu.js」と記載いたします。
※「menu.js」ファイルの内容は下記で後ほど掲載いたします。
【メタタグに記述】
現在居るページが分かるグローバルメニュー画像変更出来るjquery|WEBデザイナー 【キングサイト】
グローバルメニューを記載
グローバルメニュー作成時に、画像は「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サイトに合わせてご確認してみて下さい。
- タグ:
- javascript,
- jQuery,
- グローバルメニュー,
- スクリプト,
- 現在居るページが分かる,
- 画像変更
コメントする
おすすめの記事
自作パソコンの組み立て方法②(パソコンを組み立てる方法)
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...
WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して情報を表示させる方法
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...
WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して管理画面プロフィールを編集する方法
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...
WordPress(ワードプレス)で投稿記事内の最初の画像を表示させる方法
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...
WordPress(ワードプレス)権限グループ別(管理者、編集者、投稿者、寄稿者、購読者)のLevelと所有権限
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...
WordPress(ワードプレス)管理画面記事投稿画面の内容を固定で「表示・非表示」する設定方法
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...
Facebookでコメントする