複数ページでwebサイトを作成するときに、現在いるページがわかりやすいようにメニューの表示を変えたい時があるかと思います。
今回は現在いるページのメニューに表示を変える「カレント表示」のやり方をJavaScriptだけで実装する方法を紹介します。
INDEX
サンプルコード
初めにサンプルコードを記載します。
JavaScriptの説明がメインになりますのでhtmlとcssは必要最低限の機能のみを記載してます。
JavaScriptでやっていることはとてもシンプルで、グローバルナビのリンク先と現在のページのURLを比較し、同じだった場合にclassを付与してスタイルを変更しています。
const headerNavLink = document.querySelectorAll('.js-header-nav-link');
headerNavLink.forEach((targetLink) => {
if (targetLink.href === location.href) {
targetLink.parentElement.classList.add('is-current');
}
});
<header>
<h1><a href="/">logo</a></h1>
<nav>
<ul>
<li><a class="js-header-nav-link" href="/">TOP</a></li>
<li><a class="js-header-nav-link" href="/news/">NEWS</a></li>
<li><a class="js-header-nav-link" href="/about/">ABOUT</a></li>
<li><a class="js-header-nav-link" href="/contact/">CONTACT</a></li>
</ul>
</nav>
</header>
li.is-current a {
color: brown;
}
コードの解説
対象となる要素を取得
まず初めに対象となる要素を取得します。
今回はa
タグのhref
属性を取得して比較したい為、対象の要素をわかりやすいように取得したい全ての要素に.js-header-nav-link
というclass名を設定しています。
またdocument.querySelectorAll
で取得した要素は配列風オブジェクトのためforEach
を使い繰り返し処理を行います。
// 「js-header-nav-link」というclass名を持つ全ての要素を「headerNavLink」変数に格納
const headerNavLink = document.querySelectorAll('.js-header-nav-link');
// querySelectorAllで取得した配列風オブジェクトをforEachでループ処理
headerNavLink.forEach((targetLink) => {
// ここに処理を記載 ・・・
});
対象の要素と現在のURLを比較
targetLink
には先ほど取得した.js-header-nav-link
の要素がそれぞれ入っており、.href
プロパティで.js-header-nav-link
classがついている要素のリンク先とlocation.href
で現在のURLを取得し、それぞれの値が合っているかを比較します。
const headerNavLink = document.querySelectorAll('.js-header-nav-link');
headerNavLink.forEach((targetLink) => {
// if文でヘッダーナビのリンク先と現在のURLを比較
if (targetLink.href === location.href) {
// ここに処理を記載 ・・・
}
});
.hrefプロパティ
オブジェクトのhrefに記載されているリンク先をhttpを含む全体のURLを取得。
locationオブジェクト
現在いるペーのURLの情報を取得。location.href
とすることで、httpを含むURL全体を収めた情報を文字列で取得します。
=== 演算子
型を含めて比較し厳密に等しい場合に真を返す。
現在のURLと同じ要素にclassを付与
現在のURLと同じリンク先の要素(a
タグ)の親要素(li
タグ)に.is-current
を追加しています。
JavaScriptで行っている処理はclassを追加することだけで、実際の見た目に関してはcssで調整を行います。
const headerNavLink = document.querySelectorAll('.js-header-nav-link');
headerNavLink.forEach((targetLink) => {
if (targetLink.href === location.href) {
// ターゲットの親要素に「is-current」classを追加
targetLink.parentElement.classList.add('is-current');
}
});
li.is-current a {
color: brown;
}
.parentElementプロパティ
対象の親要素のElementを返す。
まとめ
以上でJavaScriptで作るヘッダーメニューのカレント表示の完成です。
ヘッダーのグローバルナビ以外にもサイドバーなどで同じように利用することができますので様々なシチュエーションでアレンジして試してみてください。