カレントナビゲーションハイライト表示
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
- |
|
- | ✕ |
デモ
現在開いているページと同じグローバルナビゲーションのリンクにアクセントが付きます。
（該当ページ：オレンジカラーのスタイル、親階層にはオレンジの下線）※詳細は構造図参照
構造図
デモのパーツの構造を説明しています。
設定方法
-
CSSをカスタムCSSに記述。
- JavaScriptを共通フッターの一番下に配置。
-
JavaScriptにて自動で以下のクラスが付与されます。
- 現在開いているページにはクラス名「current」が付与されます。
- 現在開いているページの親ページ（第2階層目）にはクラス名「currentParent」が付与されます。
- カレントページのスタイルはカスタム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 -----*/
© Basic Inc. All Rights Reserved.