知ってた？ナルホド！
こんにちは！コーダーの平原です！
Webサイトのグローバルナビゲーションなどで、現在ページのカレント表示をしているサイトをよく見ますよね。
このカレント表示の機能の作り方は色々あり、参考サイトも数多くあるのですが、作りたい仕様が実現できないプログラムだったりします。
そこで今回は、案件でよく使用する現在ページのカレント表示をする為のjQueryのプログラムをご紹介します。
※以下2020.11.24更新内容です。
こちらの記事を見てくれた方から、ネット環境のみでなく、ネットに繋がないローカル環境でもカレント表示機能を動かす方法についてお問い合わせがありました。
(有難うございます！！)
カレント表示機能は、作るサイトの仕様やディレクトリ構造によってプログラムを変更する必要がある為、今回ご紹介する方法が機能しない場合もあるかと思いますが、限られた仕様での1つの方法として、参考になったら嬉しいです。
1. 仕様説明
今回作成した、現在ページのカレント表示の仕様をご説明します。
現在ページのURLのパス名の第1階層と、href属性の第1階層の値を比較し、同じ値であればカレント表示がされるという仕様になっています。
動作する条件は以下の通りです。
ナビゲーションのa要素に指定した、href属性の値が相対パス、又はルート相対パスであること。
/sample/ //ルート相対パス第2階層がある場合は、第1階層のディレクトリに該当するナビゲーションにカレントを付けること。
/sample/sample01/ //第2階層
/sample/ //第1階層のディレクトリカレント表示された時のCSSも、事前に用意しておきましょう。
a.current{
border-bottom: 3px solid red;
}2. 現在ページのカレント表示機能
こちらが1の仕様で作成した、現在地のカレント表示機能のプログラムです。
$(function(){
var pageURL = location.pathname,
pageURLArr = pageURL.split('/'), //パスを分割して配列化する
pageURLArrCategory = pageURLArr[1]; //パスから第1階層を取得
$('.gnav > ul > li > a').each(function (i, v) {
var selfhref = $(v).attr('href'),
hrefArr = selfhref.split('/'), //href属性の値を分割して配列化する
hrefArrCategory = hrefArr[1]; //href属性の第1階層を取得
//パスの第1階層とhref属性の第1階層を比較して同じ値であればcurrentを付与する
if (pageURLArrCategory === hrefArrCategory) {
$(v).addClass('current');
}
});
});3. location.pathname
locationオブジェクトのpathnameプロパティでは、現在ページのパス名を参照します。取得したパス名は変更することもでき、それによりページ遷移をさせることもできます。
locationオブジェクトには、pathnameプロパティの他にも多数のプロパティがあり、URL全体や、ホスト名、アンカーなどを取得することも可能です。
4. split
splitは引数に指定した文字列で、文字列を分割して配列として返すメソッドです。
今回の場合は、取得したパスを「/」で分割して、配列から第1階層に該当する文字列を取得しています。
splitメソッドはその他にも、改行コードで分割したり、取得する個数を制限したりすることもできます。
5. ネットに繋がないローカル環境で動かす方法(2020.11.24更新)
仕様説明
まず、今回のプログラムが機能するディレクトリ構造がこちらです。
siteフォルダがこのサイトのデータを内包している親フォルダで、
下層ページは、第3階層まである場合を想定し、第3階層のページを表示した際は、第2階層「works」にカレントが付くようにします。
site/index.html
site/works/index.html
site/works/works01/index.html各ページのhref属性に指定する値は「相対パス」で指定します。
(ルート相対パスはサーバー環境でしか機能しない為)
尚、「./〇〇/」だけだと、そのフォルダのディレクトリ一覧が表示されてしまうので、
index.htmlまで指定します。
トップページの場合
./index.html
./works/index.html下層ページ(第2階層)の場合
../index.html
../works/index.html下層ページ(第3階層)の場合
../../index.html
../../works/index.htmlまた、ネットに繋がないローカル環境で動かす場合、URLは下記のようになる為、
このサイトの親フォルダである「site」が、URLのパスの最後から2番目の階層にいる場合と、そうでない場合で条件分岐をかけたいと思います。
file:///Users/yamadatoro/Documents/site/index.htmlネットに繋がないローカル環境で動く、現在地のカレント表示機能
こちらが作成したプログラムになります。
「2. 現在地のカレント表示機能」と異なるところは、トップページを表示している時、下層ページを表示している時で、比較するURLのパスの階層を変えているところです。
その為、最初にURLのパスから最後の階層と、最後から2番目、3番目の階層を取得して変数に代入しています。
$(function(){
var pageURL = location.pathname,
pageURLArr = pageURL.split('/'), //パスを分割して配列化する
pageURLArrLast = pageURLArr.slice(-1)[0]; //パスから最後の階層を取得
pageURLArrLast2 = pageURLArr.slice(-2)[0]; //パスの最後から2番目の階層を取得
pageURLArrLast3 = pageURLArr.slice(-3)[0]; //パスの最後から3番目の階層を取得
$('.gnav > ul > li > a').each(function (i, v) {
var selfhref = $(v).attr('href'),
hrefArr = selfhref.split('/'), //href属性の値を分割して配列化する
hrefArrCategory = hrefArr[1]; //href属性の第1階層を取得
hrefArrCategory2 = hrefArr[2]; //href属性の第2階層を取得
//URLのパスから最後の2番目の階層がsiteの場合
if (pageURLArrLast2 === 'site') {
//パスの最後の階層とhref属性の第1階層を比較して同じ値であればcurrentを付与する
if (pageURLArrLast === hrefArrCategory) {
$(v).addClass('current'); //aタグに.currentを付与
}
//そうでない場合
} else {
//パスの最後から2番目の階層とhref属性の第1階層を比較して同じ値であればcurrentを付与する
if (pageURLArrLast2 === hrefArrCategory) {
$(v).addClass('current'); //aタグに.currentを付与
} else {
//そうでない場合、パスの最後から3番目の階層とhref属性の第2階層を比較して同じ値であればcurrentを付与する
if (pageURLArrLast3 === hrefArrCategory2) {
$(v).addClass('current'); //aタグに.currentを付与
}
}
}
});
});6. まとめ
現在ページのカレント表示機能の実装は、どのような仕様を実現したいかによって変化します。href属性のパスの指定方法や、グローバルナビゲーションに表示する階層、そして実際にあるページの階層の深さなどを理解した上で、その仕様に合った機能である必要があります。
使用頻度の高い機能の為、使い回してしまいそうになりますが、実装漏れにならない為にもサイトの仕様をきちんと理解することが大切ですね。
