カレントナビゲーションハイライト表示

追加可能パーツ 変更可能箇所 同一ページ
に複数設置
ページ複製・
クリップボード使用可否

-

  • カレントページのアクセントのスタイル
    (該当ページと親階層につくアクセント)
-

デモ

現在開いているページと同じグローバルナビゲーションのリンクにアクセントが付きます。
(該当ページ:オレンジカラーのスタイル、親階層にはオレンジの下線)※詳細は構造図参照

構造図

デモのパーツの構造を説明しています。

設定方法

  • CSSをカスタムCSSに記述。

  • JavaScriptを共通フッターの一番下に配置。
  • JavaScriptにて自動で以下のクラスが付与されます。

  1. 現在開いているページにはクラス名「current」が付与されます。
  2. 現在開いているページの親ページ(第2階層目)にはクラス名「currentParent」が付与されます。
  3. カレントページのスタイルはカスタムCSSで適宜調整してください。

JS・CSS

  • JS
  • CSS

JavaScript

2025-06-20更新(v1.0.0)

<script>
/* ---------------------------------
カレントナビゲーションハイライト表示
--------------------------------- */
'use strict';

document.addEventListener('DOMContentLoaded', function () {
const gnav = document.querySelectorAll('.main-menu a');

gnav.forEach(function (link) {
/* gnavのパスと現在のページのパスが一致したらクラスを付与 */
if (link.pathname === location.pathname) {
link.parentElement.classList.add('current');
if (!link.closest("li[class^='level-01']").classList.contains('current')) {
/* グロナビの第2階層にクラスを付与 */
link.closest("li[class^='level-01']").classList.add('currentParent');
}
}
/* TOPページかどうかを判定してカレントクラスを付与 */
if (window.location.pathname === "/" && link.pathname === "/index") {
link.parentElement.classList.add('current');
}
});
});
/* ---------------------------------
カレントナビゲーションハイライト表示 END
--------------------------------- */
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

2025-10-17更新(v1.1.0)

/*----- カレントナビゲーションハイライト表示 START v1.1.0-----*/
:is(.navi-002-01,navi-001-01) {
&.js_navi_current {
header#navigations {
.inner {
.main-menu {
ul.clearfix {
li {
// 該当ページの親(第2階層目)につくアクセント
&.currentParent {
@include breakpoint-pc {
border-bottom: 2px solid #ffad2f !important;
}
}
// 該当ページにつくアクセント
&.current {
&::after {
color: #ffad2f !important;
}
> a {
color: #ffad2f !important;
}
&:hover {
& > a {
color: #fff !important;
}
}
}
}
}
}
}
}
}
}
/*----- カレントナビゲーションハイライト表示 END -----*/

JSが必要な実装の注意点スプレッドシート(H列)は読みましたか?

※必ず注意点(H列)をご確認の上閲覧ください

ページトップへ戻る