擬似ナビ（2段）

2025年6月新リッチテキスト追加に伴い注意事項が追加されています。実装前に確認をお願いします（2025/07/02)

 

追加可能パーツ

 変更可能箇所 NG 同一ページ
に複数設置

ページ複製・
クリップボード使用可否
  • CVボタン
    →全体で3つまで※1
  • ナビ項目の数
    (共通ナビと同様に最大8個)
  • 文字スタイル・余白
  • hover時の挙動
  • ボタンデザイン
     

[ハンバーガーメニュー]

  • 背景色・文字スタイル
  • アイコンの色
  • パーツの新規追加
    （パーツ・行・カラム等）
  • スムーズスクロールの速さ
  • 共通パーツに用意されていないパーツ（検索パーツ他）
  • 検索結果ページに表示※2
 × ○
※留意事項

※1：4つ以上はレスポンシブ時に崩れる恐れがあります。
※2：構造上、検索結果ページに擬似ナビを表示させることは不可です。

※詳しい編集方法や編集時の注意点については【擬似グロナビ（2段）〜共通パーツ編集方法〜】をご参照ください。
※サイドバーがある場合でも、疑似ナビは幅100%で表示されます。
※リッチテキストは操作性が悪いので、頻繁に更新されるのに向きません。ご了承頂いた上で、要引継ぎをお願いします。
　文言・リンクの変更前にはクリップボードでバックアップを保存することをオススメします。
※リンク、文言の変更、文字色の変更はリッチテキスト内の文字行を１行ずつドラッグし編集を行うようにしてください。
　複数の文字列をドラッグして選択した状態で編集を行うと、公開画面でメニューが崩れる恐れがあります。
※フェードインアニメーションを使用している場合はページ内リンク位置がずれます。

※テキストパーツのHTMLモードを使用した文言の編集・修正はしないでください。コードの確認、不要なインラインスタイルを削除する、入り込んでしまった不要なデータコードをHTMLモードで削除することは可能です。

※メニューリストを作成する際にプレーンテキストをコピペした場合、作成後のメニューリストのHTML構造が「ul > li > div > aになっていることを確認してください。li > p > aの構造になっていた場合、リスト化を解除した上でもう一度リスト化し　li > div > aに構造が変更されていることを確認してください。 JSがうまくあたらない場合、divが生成されていない可能性があります。（詳しくは設定方法をご覧ください）

構造図

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

構造図_疑似ナビ2段

内部リンク確認用

設定方法

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

  • 編集画面用CSSを適切な位置に記述。

  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページある場合は共通フッターに配置。
  • クラス名を見本とあわせる。
  1. 疑似ナビ表示用ページの編集画面に入り、右上にある基本設定画面から、エリアの表示切り替え＞「ナビゲーションを表示する」のチェックを外す。
  2. セクションを新規作成し、クラス名「navi_custom_sec js-navi_custom_sec fixed」を追加。
    ※ナビを固定したくない場合、クラス「fixed」は削除してください。
  3. 上記セクションの中に共通パーツを新規作成。
  4. [共通パーツ内]で行（row）を作成し、クラス名「navigation-cont_custom」を追加。
  5. 上記の行（row）を2分割し、左のカラム（col）にクラス名「logo_col」を、右のカラム（col）にクラス名「btn_col」を追加。※ロゴ画像やボタンは必要であれば各自追加。
  6. その下に行（row）を新規作成し、クラス名「menu-trigger_row」を追加。
    ※これがSP時の三本線ハンバーガーメニューの元になります。
  7. 上記の行（row）内にリッチテキストを配置し、クラス名「js-menu-trigger_btn menu-trigger_btn」を追加。
    ※テキスト内容は公開ページには表示されないので何でも大丈夫です。（例：ハンバーガーメニュー）
  8. その下に行（row）を更に新規作成し、クラス名「main-menu_custom」を追加。
  9. 上記の行（row）内にリッチテキストを配置し、クラス名「js-menu_lists menu_lists」を追加。
    リッチテキストのリスト機能を使用して、第一階層〜第三階層までリンクを設定。（設定方法・構造図参照）

    ※この際、一つでもリンク設定漏れがあると疑似ナビが正しく移動しませんのでご注意ください。

  • 新CMSの場合：基本デザインパーツ（セクションパーツ、単体パーツ）を使用して問題ありません。
    rowは新規で作成した方がCSSの影響を受けないので安心かと思います。

注意点

  • 共通パーツ内のリッチテキストは時々意図しない挙動になり崩れる恐れがあるので注意してください。
    ※半角スペースが入っていると崩れたりなど
    ※コピーだと余計なタグを持ってくることがあるので手入力推奨
     

  • 第二階層の数について制限はありませんが、閲覧者のモニターの高さによっては見切れる可能性があります。個数的にははっきり言えませんが、10個以上はおすすめはしません。
     

  • ページ内にフェードインのアニメーションを使用しているとページ内リンクのスクロール位置がズレます。これは共通ナビでも発生する仕様ですのでご注意ください。
     

  • 擬似ナビ設置ページでメンビジを使用する際は、擬似ナビとメンビジの表示位置が公開画面と逆になりますのでご注意ください。
     

  • アップセル等でCSSが古い場合があるので、カスタムCSSに「scroll-behavior: smooth;」が適用されているか必ず確認して下さい。こちらのスタイルが当たっていないとスムーズスクロールが効きません。
     

  • メニューリストを作成する際にプレーンテキストをコピペした場合、作成後のメニューリストのHTML構造が「ul > li > div > aになっていることを確認してください。li > p > aの構造になっていた場合、リスト化を解除した上でもう一度リスト化し　li > div > aに構造が変更されていることを確認してください。 JSがうまくあたらない場合、divが生成されていない可能性があります。（詳しくは設定方法をご覧ください）

JS・CSS・編集画面用CSS

  • JS
  • CSS
  • 編集画面用CSS
  • 変数が無い場合
JSをコピーする

2025-08-14更新（v2.1.0）

<script>
'use strict';
/* ---------------------------
擬似ナビ（2段） v2.1.0
--------------------------- */
document.addEventListener('DOMContentLoaded', function() {
/* 擬似ナビに .has-fixed-side を付与（固定サイドバーが存在する場合のみ） */
const fixedSide = document.querySelector('.fixed-side');
const navi_custom_sec = document.getElementsByClassName('js-navi_custom_sec')[0];
if (fixedSide && navi_custom_sec) {
navi_custom_sec.classList.add('has-fixed-side');
}

/* ちらつき防止 */
document.querySelectorAll('.js-navi_custom_sec')[0].style.display = 'block';
/*--- PC or SP　判定 ---*/
function windowPCorSP() {
if (window.matchMedia('(min-width: 770px)').matches) {
/* 画面幅が770px以上のときの処理(PC) */
return true;
} else {
/* 画面幅が769px以下のときの処理(SP) */
return false;
}
};
/*------------- 初期化 (変数定義やクラス付与) START -------------*/
/* メインメニュー（Gナビ） */
/* クラス付与 */
const mainMenu = document.querySelectorAll('.js-menu_lists')[0];
/* クラス付与 */
const level_01 = document.querySelectorAll('.js-menu_lists > div > ul > li');
level_01.forEach((el) => {
if (!el.classList.contains('js-level-01')) {
el.classList.add('js-level-01');
}
});
/* クラス付与 */
const level_02 = document.querySelectorAll(
'.js-menu_lists ul > li > ul > li');
level_02.forEach((el) => {
if (!el.classList.contains('js-level-02')) {
el.classList.add('js-level-02');
}
});
/* クラス付与 */
const level_03 = document.querySelectorAll(
'.js-menu_lists ul > li > ul > li > ul > li');
level_03.forEach((el) => {
el.classList.remove('js-level-02');
/* 第三階層から js-level-02 を除外 */
if (!el.classList.contains('js-level-03')) {
el.classList.add('js-level-03');
}
});
/* 1階層目トリガー */
for (let i = 0; i < level_01.length; i++) {
let target;
if (level_01[i].querySelectorAll('.js-level-02').length > 0) {
target = level_01[i];
};
/* クラス付与 */
if (target !== undefined) {
target.classList.add('js-level-01-trigger');
target.classList.remove('js-level-01', 'js-level-02', 'js-level-03');
/* aタグの中にspanを追加 */
let icon_element = document.createElement('span');
icon_element.classList.add('toggle_icon');
let aTag = target.querySelector('div > a');
if (aTag && !aTag.querySelector('.toggle_icon')) {
aTag.appendChild(icon_element);
}
}
};
const level_01_trigger = document.querySelectorAll('.js-level-01-trigger');
/* 2階層目 [ul] */
for (let i = 0; i < level_02.length; i++) {
const level_01_cont = level_02[i].parentNode;
/* クラス付与 */
level_01_cont.classList.add('js-level-01-cont');
level_01_cont.style.display = 'none';
};
const level_01_cont = document.querySelectorAll('.js-level-01-cont');
/* 2階層目トリガー */
for (let i = 0; i < level_02.length; i++) {
let target;
if (level_02[i].querySelectorAll('.js-level-03').length > 0) {
target = level_02[i];
};
/* クラス付与 */
if (target !== undefined) {
target.classList.add('js-level-02-trigger');
target.classList.remove('js-level-01', 'js-level-02', 'js-level-03');
/* aタグの中にspanを追加 */
let icon_element = document.createElement('span');
icon_element.classList.add('toggle_icon');
let aTag = target.querySelector('div > a');
if (aTag && !aTag.querySelector('.toggle_icon')) {
aTag.appendChild(icon_element);
}
}
};
const level_02_trigger = document.querySelectorAll('.js-level-02-trigger');
/* 3階層目 [ul] */
for (let i = 0; i < level_03.length; i++) {
const level_02_cont = level_03[i].parentNode;
/* クラス付与 */
level_02_cont.classList.add('js-level-02-cont');
level_02_cont.style.display = 'none';
};
const level_02_cont = document.querySelectorAll('.js-level-02-cont');
/*------------- 初期化 (変数定義やクラス付与) END -------------*/
/*------------- モジュール 関数定義 START -------------*/
/* モジュール (カプセル化) jQueryとかぶらないように */
const ferretModule = (() => {
return {
/* slideUp */
slideUp: (el, duration = 300) => {
el.style.height = el.offsetHeight + 'px';
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = duration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
setTimeout(() => {
el.style.display = 'none';
el.style.removeProperty('height');
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, duration);
},
/* slideDown */ slideDown: (el, duration = 300) => {
el.style.removeProperty('display');
let display = window.getComputedStyle(el).display;
if (display === 'none') {
display = 'block';
}
el.style.display = display;
let height = el.offsetHeight;
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = duration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.height = height + 'px';
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
setTimeout(() => {
el.style.removeProperty('height');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, duration);
}
}
})();
/*------------- モジュール 関数定義 END -------------*/
/*------------- 擬似ナビゲーション メンビジ上に配置 START -------------*/
const theme_fo_base = document.getElementsByClassName('theme-fo-base')[0];
const main_visual = document.getElementsByClassName('main-visual')[0];
theme_fo_base.parentNode.insertBefore(navi_custom_sec, theme_fo_base);
/*------------- 擬似ナビゲーション メンビジ上に配置 END -------------*/

/*------------- ドロップダウン ナビゲーション START -------------*/
const initializationLevel = () => {
for (let i = 0; i < level_01_cont.length; i++) {
level_01_cont[i].classList.remove('is-open');
level_01_cont[i].style.display = 'none';
}
for (let i = 0; i < level_02_cont.length; i++) {
level_02_cont[i].classList.remove('is-open');
level_02_cont[i].style.display = 'none';
}
};
const level02Open = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName(
'js-level-01-cont')[0];
ferretModule.slideDown(slideTarget, 0);
};
const level02Close = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName(
'js-level-01-cont')[0];
ferretModule.slideUp(slideTarget, 200);
};
const level03Open = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName(
'js-level-02-cont')[0];
ferretModule.slideDown(slideTarget, 200);
};
const level03Close = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName(
'js-level-02-cont')[0];
ferretModule.slideUp(slideTarget, 200);
};
const level02ToggleSp = (e) => {
e.preventDefault();
e.stopPropagation();
let clickTarget = e.currentTarget;
let trigger = clickTarget.closest('.js-level-01-trigger');
let targetList = trigger.querySelector('.js-level-01-cont');
if (targetList.style.display !== 'block') {
clickTarget.classList.add('is-open');
targetList.classList.add('is-open');
targetList.style.display = 'block';
} else {
clickTarget.classList.remove('is-open');
targetList.classList.remove('is-open');
targetList.style.display = 'none';
}
};
const level03ToggleSp = (e) => {
console.log('3rd level toggle fired');
e.preventDefault();
e.stopPropagation();
let clickTarget = e.currentTarget;
let trigger = clickTarget.closest('.js-level-02-trigger');
let targetList = trigger.querySelector('ul.js-level-02-cont') || trigger.parentElement
.querySelector('ul.js-level-02-cont') || trigger.closest('li').querySelector(
'ul.js-level-02-cont');
if (!targetList) {
console.warn('第三階層が見つかりませんでした');
return;
}
if (targetList.style.display !== 'block') {
clickTarget.classList.add('is-open');
targetList.classList.add('is-open');
targetList.style.display = 'block';
} else {
clickTarget.classList.remove('is-open');
targetList.classList.remove('is-open');
targetList.style.display = 'none';
}
};
const menuLevel23Open = () => {
if (windowPCorSP()) { /*--- PCのときのイベント設定 ---*/
/* リサイズでレスポンシブ時 */
for (let i = 0; i < level_01_cont.length; i++) {
if (level_01_cont[i].classList.contains('is-open')) {
initializationLevel();
}
};
mainMenu.style.display = '';
if (menuTiggerBtn.classList.contains('active')) {
menuTiggerBtn.classList.remove('active');
};
for (let i = 0; i < level_01_trigger.length; i++) {
/* 2階層目OPEN ホバー ドロップダウン */
level_01_trigger[i].addEventListener('mouseenter', level02Open);
/* 2階層目OPEN ホバーアウト ドロップアップ */
level_01_trigger[i].addEventListener('mouseleave', level02Close);
};
/* 3階層目OPEN ホバー ドロップダウン */
for (let i = 0; i < level_02_trigger.length; i++) {
level_02_trigger[i].addEventListener('mouseenter', level03Open);
/* 3階層目OPEN ホバーアウト ドロップアップ */
level_02_trigger[i].addEventListener('mouseleave', level03Close);
};
for (let i = 0; i < level_02_trigger.length; i++) {
let toggle_icon = level_02_trigger[i].querySelector('div > .toggle_icon');
/* 2階層目OPEN クリックトグル */
toggle_icon.removeEventListener('click', level02ToggleSp);
};
for (let i = 0; i < level_02_trigger.length; i++) {
let toggle_icon = level_02_trigger[i].querySelector('div > .toggle_icon');
/* 2階層目OPEN クリックトグル */
toggle_icon.removeEventListener('click', level03ToggleSp);
};
} else { /*--- SPのときのイベント設定 ---*/
menuTiggerBtn.style.display = '';
if (!menuTiggerBtn.classList.contains('active')) {
mainMenu.style.display = 'none';
};
for (let i = 0; i < level_01_trigger.length; i++) {
/* 2階層目OPEN ホバー ドロップダウン */
level_01_trigger[i].removeEventListener('mouseenter', level02Open);
/* 2階層目OPEN ホバーアウト ドロップアップ */
level_01_trigger[i].removeEventListener('mouseleave', level02Close);
};
for (let i = 0; i < level_02_trigger.length; i++) {
/* 3階層目OPEN ホバー ドロップダウン */
level_02_trigger[i].removeEventListener('mouseenter', level03Open);
/* 3階層目OPEN ホバーアウト ドロップアップ */
level_02_trigger[i].removeEventListener('mouseleave', level03Close);
};
for (let i = 0; i < level_01_trigger.length; i++) {
let toggle_icon = level_01_trigger[i].querySelector('.toggle_icon');
/* 2階層目OPEN クリックトグル */
if (toggle_icon) {
toggle_icon.addEventListener('click', level02ToggleSp);
}
};
/* 2階層トリガーの.toggle_iconに3階層トグルイベントをバインド */
for (let i = 0; i < level_02_trigger.length; i++) {
let toggle_icon = level_02_trigger[i].querySelector('.toggle_icon');
if (toggle_icon) {
toggle_icon.removeEventListener('click', level03ToggleSp);
toggle_icon.addEventListener('click', level03ToggleSp);
}
}
};
};
/*------------- ドロップダウン ナビゲーション END -------------*/
/*------------- ハンバーガーメニュー START -------------*/
const menuTiggerBtn = document.querySelectorAll('.js-menu-trigger_btn')[0];
/* ハンバーガーメニュー内リンククリックでメニューを閉じる（トグル以外） */
const navLinks = document.querySelectorAll('.js-menu_lists a');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
if (!link.querySelector('.toggle_icon') && !windowPCorSP()) {
mainMenu.style.display = 'none';
menuTiggerBtn.classList.remove('active');
}
});
});
menuTiggerBtn.innerHTML = (
'\ <span class="modal_close_border"></span>\ <span class="modal_close_border"></span>\ <span class="modal_close_border"></span>\ '
);
menuTiggerBtn.addEventListener('click', function() {
menuTiggerBtn.classList.toggle('active');
if (menuTiggerBtn.classList.contains('active')) {
mainMenu.style.display = '';
} else {
mainMenu.style.display = 'none';
}
});
/*------------- ハンバーガーメニュー END -------------*/
/*------------- PC or SPでGナビの表示非表示を切り替える START -------------*/
const mainMenuDisplay = () => {
if (windowPCorSP()) {
mainMenu.style.display = '';
menuTiggerBtn.classList.remove('active');
menuTiggerBtn.style.display = 'none';
} else {
mainMenu.style.display = 'none';
menuTiggerBtn.style.display = '';
}
};
/*------------- PC or SPでGナビの表示非表示を切り替える END -------------*/
/*--- ウィンドウのリサイズ完了後の処理 ---*/
const windowResize = () => {
let timer = 0;
let delay = 200;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => {
menuLevel23Open();
}, delay);
}, false);
};
menuLevel23Open();
mainMenuDisplay();
windowResize();
});
/*--- ページ内遷移ずれる対策 ---*/
window.addEventListener('load', () => {
const headerSec = document.querySelector('.js-navi_custom_sec');
/* 擬似ナビ（2段）を取得 */
if (headerSec) {
const headerHeight = headerSec.offsetHeight;
/* 擬似ナビ（2段）の高さを取得 */
/* 固定ナビの場合の処理 */
if (headerSec.classList.contains('fixed')) {
document.documentElement.style.setProperty('--navi-height',
`${headerHeight}px`);
}
}
});
/*--- ページ内遷移ずれる対策 END ---*/
/* --------------------------- 擬似ナビ（2段） END --------------------------- */

</script>


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

//旧CMS用（不要であれば削除）
//新CMS用（不要であれば削除）
と2つ記述を用意している箇所がいくつかありますので必要に応じて削除orコメントアウトを外してください。
※デフォルトでは新CMS用の記述が当たるようにしています。

CSSをコピーする

2025-08-14更新（v2.2.0）

/*----- 擬似ナビ（2段） START v2.2.0-----*/
// メンビジ上に配置のとき
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-navi_custom_sec {
display: none; //ちらつき防止
* {
box-sizing: border-box; //はみだし防止
}
//固定サイドバー対策
&.has-fixed-side {
@media screen and (min-width: 1201px) {
width: calc(100% - 420px);
}
}
}
&.navi_custom_sec {
// font-family: $font_family;//旧CMS用（不要であれば削除）
font-family: var(--fo-text-font-family);//新CMS用（不要であれば削除）
width: 100%;
background: $header_bg_color;
// box-shadow: $navigation_box_shadow_common;//変数がある場合はコメントアウトを解除
padding: 0;
// オプション 上部固定
&.fixed {
position: sticky;
z-index: 1001;
top: 0;
}
.inner {
max-width: 100%;
padding: 0;
.row {
.col {
padding: 0;
.component {
margin: 0;
&.cta {
.cta-row {
&.navigation-cont_custom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
max-width: 1240px;
min-height: 60px;
padding: 10px 20px;
margin: 0 auto;
@include breakpoint-sp {
min-height: 51px;
padding: 0;
}
.cta-column {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
&.logo_col {
width: auto !important;
@include breakpoint-sp {
padding: 0 0 0 10px;
}
.component {
&.image {
a {
display: inline-block;
}
img {
@include breakpoint-pc {
width: $header_logo !important;
// max-height: 50px;
}
@include breakpoint-sp {
max-height: $header_sp_logo;
}
}
}
}
}
&.btn_col {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
width: auto !important;
padding: 10px 0;
@include breakpoint-sp {
padding: 0 65px 0 0;
}
.component {
&.button {
&:not(:first-child) {
margin-left: 10px;
@include breakpoint-sp {
margin-left: 0;
}
}
.button-cont {
a {
&.size-s {
@include breakpoint-sp {
width: auto;
min-width: auto;
margin: 0;
padding: 5px 10px 5px 5px;
border: 0;
border-radius: 0;
font-size: 0 !important;
letter-spacing: 0;
background: none !important;
box-shadow: none;
}
&::before {
@include breakpoint-sp {
font-size: 22px;
margin: 0;
// color: $main_color;//旧CMS用（不要であれば削除）
color: var(--fo-main-color);//新CMS用（不要であれば削除）
}
}
}
}
}
&.btn_custom_tel {
.button-cont {
a {
&.size-s {
}
}
}
}
}
}
}
}
}
&.menu-trigger_row {
width: max-content;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
@include breakpoint-pc {
display: none;
}
.cta-column {
margin: 0;
padding: 0;
.component {
&.richtext {
&.menu-trigger_btn {
width: 60px;
height: 51px;
margin: 0;
padding: 0;
font-size: 0;
// background-color: $main_color;//旧CMS用（不要であれば削除）
background-color: var(--fo-main-color);//新CMS用（不要であれば削除）
span {
position: absolute;
left: 15px;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 3px;
transition: all .4s;
&:nth-of-type(1) {
top: 15px;
}
&:nth-of-type(2) {
top: 24px;
}
&:nth-of-type(3) {
bottom: 15px;
}
}
&.active {
span {
&:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-45deg);
transform: translateY(10px) rotate(-45deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
-webkit-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg);
}
}
}
}
}
}
}
}
&.main-menu_custom {
min-height: auto;
margin: 0;
padding: 0;
background: $navigation_bg_color;
//SP用
@include breakpoint-sp {
max-height: calc(100vh - 51px);
overflow-y: auto;
/*----
//スクロールバー非表示
-ms-overflow-style: none; //Edge
scrollbar-width: none; //Firefox
&::-webkit-scrollbar {
display: none;
}
----*/
}
.cta-column {
margin: 0;
padding: 0;
.component {
&.richtext {
&.menu_lists {
//PC用
@include breakpoint-pc {
ul {
max-width: 1140px;
display: table;
width: 100%;
margin: 0 auto;
text-align: center;
list-style: none;
li {
position: relative;
box-sizing: content-box;
min-width: 90px;
color: $navigation_text_color;
p {
margin: 0;
}
a {
display: block;
text-decoration: none;
font-size: $navigation_font_size;
font-weight: $navigation_font_weight;
line-height: 1.15;
color: $navigation_text_color;
padding: 20px 10px;
&:hover {
opacity: 1;
}
}
}
.js-level-01,
.js-level-01-trigger {
display: table-cell;
color: $navigation_text_color;
&:hover {
background-color: $navigation_hover_bg_color;
> div {
> a {
color: $navigation_hover_text_color;
}
}
}
}
.js-level-01-trigger {
padding-right: 20px;
//三角部分
&::after {
position: absolute;
right: 10px;
top: 50%;
font-family: $font_family_awsm;
content: "\f107";
color: $navigation_arrow1_color;
margin-top: 0;
transform: translateY(-50%);
font-size: 20px;
line-height: 1;
}
&:hover::after {
color: $navigation_hover_text_color;
transform: rotate(180deg) translateY(50%);
}
}
.js-level-01-cont {
display: block;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
background-color: $navigation_bg2_color;
}
.js-level-02,
.js-level-02-trigger {
display: block;
a {
padding: 20px;
color: $navigation_text2_color;
&:hover {
color: $navigation_hover_text2_color;
background-color: $navigation_hover_bg2_color;
}
}
}
.js-level-02-trigger {
&::after {
position: absolute;
right: 7px;
top: 50%;
font-family: $font_family_awsm;
content: "\f105";
margin-top: 0;
color: $navigation_arrow2_color;
font-size: 20px;
transform: translateY(-50%);
}
&:hover::after {
color: $navigation_hover_text_color;
}
}
.js-level-02-cont {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 100%;
background-color: $navigation_bg2_color;
}
.js-level-03 {
a {
padding: 20px;
color: $navigation_text2_color;
&:hover {
color: $navigation_hover_text2_color;
background-color: $navigation_hover_bg2_color;
}
}
}
}
}
//SP用
@include breakpoint-sp {
ul {
list-style: none;
margin: 0;
li {
p {
margin: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
font-size: $navigation_sp_font_size;
color: $navigation_sp_text_color;
&:hover {
color: $navigation_sp_hover_text_color;
background: $navigation_sp_bg_color;
span.toggle_icon {
&::before {
color: $navigation_sp_hover_text_color;
}
}
}
}
}
.js-level-01,
.js-level-01-trigger {
a {
padding: 20px 10px;
}
}
.js-level-02,
.js-level-02-trigger,
.js-level-03 {
a {
&:hover {
background: $navigation_sp_bg3_color;
color: $navigation_sp_text3_color;
span.toggle_icon {
&::before {
color: $navigation_sp_text3_color;
}
}
}
}
}
.js-level-02,
.js-level-02-trigger {
a {
padding: 20px 30px 20px calc(10px + 1em);
}
}
.js-level-03 {
a {
padding: 20px 30px 20px calc(10px + 2em);
}
}
.js-level-01-trigger {
> div {
> a,
> strong a {
padding: 20px 30px 20px 10px;
}
}
}
.js-level-02-trigger {
> div {
> a,
> strong a {
padding: 20px 30px 20px calc(10px + 1em);
}
}
}
.js-level-01-trigger,
.js-level-02-trigger {
a {
span.toggle_icon {
&::before {
content: "\f107";
display: flex;
justify-content: center;
align-items: center;
font-family: $font_family_awsm;
font-size: 30px;
line-height: 1;
color: $navigation_sp_arrow1_color;
width: 30px;
height: 100%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
// 2階層目, 3階層目オープン時
&.is-open {
&::before {
content: "\f106";
}
}
}
}
}
}
.js-level-02-cont {
display: none;
position: relative;
width: 100%;
background-color: $navigation_bg2_color;
&.is-open {
display: block;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*----- 擬似ナビ（2段） END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2024-09-13更新（v1.0.0）

/*-- 擬似ナビ（2段） 編集画面用 2段 START v1.0.0​​​​​--*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-navi_custom_sec {
display: block;
}
&.navi_custom_sec {
padding: 50px 0;
&.fixed {
position: relative;
top: initial;
border: 1px solid blue;
&::before {
content: "疑似ナビゲーション上部固定中（クラス名：fixed）";
color: #fff;
background: blue;
font-size: 13px;
position: absolute;
right: 0;
top: -24px;
padding: 0 5px;
}
}
.inner {
padding: 20px;
.row {
.col {
.component {
&.cta {
.cta-row {
&.menu-trigger_row {
display: block;
width: 100%;
border: 1px solid #000;
position: relative;
top: initial;
right: initial;
.cta-column {
width: 100%;
}
&::before {
content: "ハンバーガーメニュー（削除しないでください）";
color: #fff;
background: #000;
font-size: 13px;
position: absolute;
right: 0;
top: -24px;
padding: 0 5px;
}
}
&.main-menu_custom {
.cta-column {
.component {
&.richtext {
&.menu_lists {
ul {
li {
display: table-cell !important;
> ul {
display: none !important;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*-- 擬似ナビ（2段） 編集画面用 2段 END --*/

※変数が不足している場合は、下記をご活用ください。

CSSをコピーする

2024-09-13更新（v1.0.0）

// v1.0.0​​​​​
&.navi_custom_sec {
//フォント
$font_family_awsm: "FontAwesome";

//ボックスシャドウ
$navigation_box_shadow_common: 0 3px 8px rgba(#000, 0.1); //ナビゲーション専用

//ナビゲーションロゴ
$header_logo: 300px; //PCでの幅サイズ（固定）
$header_sp_logo: 35px; //SPでの高さサイズ（maxサイズ）

//グロナビ PC
$header_bg_color: var(--fo-background-color1); //ナビゲーション全体の背景色
$navigation_bg_color: $header_bg_color; //グロナビの背景色
$navigation_font_size: 14px; //グロナビのフォントサイズ（1〜3階層）
$navigation_font_weight: normal; //グロナビのフォントの太さ（1〜3階層） normal or bold
$navigation_hover_opacity: 1; //グロナビをホバーした時の透視度
$navigation_bg2_color: $navigation_bg_color; //グロナビの背景色（2階層以下）
$navigation_text_color: var(--fo-text-main-color); //グロナビのテキストカラー
$navigation_text2_color: $navigation_text_color; //グロナビのテキストカラー（2階層以下）
$navigation_hover_bg_color: #fff; //グロナビをホバーした時の背景色
$navigation_hover_bg2_color: var(--fo-main-color); //グロナビをホバーした時の背景色（2階層以下）
$navigation_hover_text_color: var(--fo-main-color); //グロナビをホバーした時のテキストカラー
$navigation_hover_text2_color: $navigation_hover_text_color; //グロナビをホバーした時のテキストカラー（2階層以下）
$navigation_arrow1_color: #aaa; //矢印カラー（1階層）
$navigation_arrow2_color: $navigation_arrow1_color; //矢印カラー（2階層）

//グロナビ ハンバーガーメニュー
$navigation_sp_font_size: 14px; //ハンバーガーメニュー（SP）時のテキストサイズ（1〜3階層）
$navigation_sp_font_weight: normal; //ハンバーガーメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$navigation_sp_text_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー １階層
$navigation_sp_text2_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー（2階層）
$navigation_sp_text3_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー（3階層）
$navigation_sp_hover_text_color: #fff; //ハンバーガーメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$navigation_sp_arrow1_color: $navigation_sp_text_color; //ハンバーガーメニュー（SP） 矢印カラー（1階層）
$navigation_sp_arrow2_color: $navigation_sp_text2_color; //ハンバーガーメニュー（SP） 矢印カラー（2階層）
$navigation_sp_bg_color: var(--fo-main-color); //ハンバーガーメニュー（SP）時の背景色（1階層）
$navigation_sp_bg2_color: #fff; //ハンバーガーメニュー（SP）時の背景色（２階層）
$navigation_sp_bg3_color: #eee; //ハンバーガーメニュー（SP）時の背景色（3階層）
$navigation_sp_border-bottom: 1px dashed var(--fo-main-color); //ハンバーガーメニュー（SP）時のボーダー（hamburger_custom 使用時）
}

旧リッチテキストパーツ用
JS・CSS・編集画面用CSS

【旧リッチテキストパーツ】で組み込みが必要な場合にお使いください。

詳細内容
  • JS
  • CSS
  • 編集画面用CSS
  • 変数が無い場合
JSをコピーする

2025-08-14更新（v1.1.0）

<script>
'use strict';

/* ---------------------------
擬似ナビ（2段） v1.1.0​​​​​
--------------------------- */

document.addEventListener('DOMContentLoaded', function() {
/* 擬似ナビに .has-fixed-side を付与（固定サイドバーが存在する場合のみ） */
const fixedSide = document.querySelector('.fixed-side');
const navi_custom_sec = document.getElementsByClassName('js-navi_custom_sec')[0];
if (fixedSide && navi_custom_sec) {
navi_custom_sec.classList.add('has-fixed-side');
}

/* ちらつき防止 */
document.querySelectorAll('.js-navi_custom_sec')[0].style.display = 'block';

/*--- PC or SP　判定 ---*/
function windowPCorSP() {
if (window.matchMedia('(min-width: 770px)').matches) {
/* 画面幅が770px以上のときの処理(PC) */
return true;
} else {
/* 画面幅が769px以下のときの処理(SP) */
return false;
}
};

/*------------- 初期化 (変数定義やクラス付与) START -------------*/
/* メインメニュー（Gナビ） */
const mainMenu = document.querySelectorAll('.js-menu_lists')[0];

/* 1階層目 */
const level_01 = document.querySelectorAll('.js-menu_lists > ul > li');
/* クラス付与 */
level_01.forEach((el) => {
el.classList.add('js-level-01');
});

/* 2階層目 */
const level_02 = document.querySelectorAll('.js-menu_lists > ul > li > ul > li');
/* クラス付与 */
level_02.forEach((el) => {
el.classList.add('js-level-02');
});

/* 3階層目 */
const level_03 = document.querySelectorAll('.js-menu_lists > ul > li > ul > li > ul > li');
/* クラス付与 */
level_03.forEach((el) => {
el.classList.add('js-level-03');
});

/* 1階層目トリガー */
for (let i = 0; i < level_01.length; i++) {
let target;
if (level_01[i].querySelectorAll('.js-level-02').length > 0) {
target = level_01[i];
};

/* クラス付与 */
if ( target !== undefined) {
target.classList.add('js-level-01-trigger');
target.classList.remove('js-level-01');
/* aタグの中にspanを追加 */
let icon_element = document.createElement('span');
icon_element.classList.add('toggle_icon');
target.querySelector('a').appendChild(icon_element);
}
};
const level_01_trigger = document.querySelectorAll('.js-level-01-trigger');

/* 2階層目 [ul] */
for (let i = 0; i < level_02.length; i++) {
const level_01_cont = level_02[i].parentNode;
/* クラス付与 */
level_01_cont.classList.add('js-level-01-cont');
level_01_cont.style.display = 'none';
};
const level_01_cont = document.querySelectorAll('.js-level-01-cont');

/* 2階層目トリガー */
for (let i = 0; i < level_02.length; i++) {
let target;
if (level_02[i].querySelectorAll('.js-level-03').length > 0) {
target = level_02[i];
};

/* クラス付与 */
if ( target !== undefined) {
target.classList.add('js-level-02-trigger');
target.classList.remove('js-level-02');
/* aタグの中にspanを追加 */
let icon_element = document.createElement('span');
icon_element.classList.add('toggle_icon');
target.querySelector('a').appendChild(icon_element);
}
};
const level_02_trigger = document.querySelectorAll('.js-level-02-trigger');

/* 3階層目 [ul] */
for (let i = 0; i < level_03.length; i++) {
const level_02_cont = level_03[i].parentNode;
/* クラス付与 */
level_02_cont.classList.add('js-level-02-cont');
level_02_cont.style.display = 'none';
};
const level_02_cont = document.querySelectorAll('.js-level-02-cont');

/*------------- 初期化 (変数定義やクラス付与) END -------------*/

/*------------- モジュール 関数定義 START -------------*/

/* モジュール (カプセル化) jQueryとかぶらないように */
const ferretModule = (() => {

return {
/* slideUp */
slideUp: (el, duration = 300) => {
el.style.height = el.offsetHeight + 'px';
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = duration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
setTimeout(() => {
el.style.display = 'none';
el.style.removeProperty('height');
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, duration);
},

/* slideDown */
slideDown: (el, duration = 300) => {
el.style.removeProperty('display');
let display = window.getComputedStyle(el).display;
if (display === 'none') {
display = 'block';
}
el.style.display = display;
let height = el.offsetHeight;
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = duration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.height = height + 'px';
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
setTimeout(() => {
el.style.removeProperty('height');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, duration);
}
}
})();

/*------------- モジュール 関数定義 END -------------*/

/*------------- 擬似ナビゲーション メンビジ上に配置 START -------------*/

const theme_fo_base = document.getElementsByClassName('theme-fo-base')[0];
const main_visual = document.getElementsByClassName('main-visual')[0];

theme_fo_base.parentNode.insertBefore(navi_custom_sec, theme_fo_base);

/*------------- 擬似ナビゲーション メンビジ上に配置 END -------------*/


/*------------- ドロップダウン ナビゲーション START -------------*/

const initializationLevel = () => {
for (let i = 0; i < level_01_cont.length; i++) {
level_01_cont[i].classList.remove('is-open');
level_01_cont[i].style.display = 'none';
}
for (let i = 0; i < level_02_cont.length; i++) {
level_02_cont[i].classList.remove('is-open');
level_02_cont[i].style.display = 'none';
}
};

const level02Open = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName('js-level-01-cont')[0];
ferretModule.slideDown(slideTarget, 0);
};

const level02Close = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName('js-level-01-cont')[0];
ferretModule.slideUp(slideTarget, 200);
};

const level03Open = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName('js-level-02-cont')[0];
ferretModule.slideDown(slideTarget, 200);
};

const level03Close = (e) => {
let slideTarget = e.currentTarget.getElementsByClassName('js-level-02-cont')[0];
ferretModule.slideUp(slideTarget, 200);
};

const level02ToggleSp = (e) => {
e.preventDefault();
e.stopPropagation();
let clickTarget = e.currentTarget;
let trigger = clickTarget.closest('.js-level-01-trigger');
let targetList = trigger.querySelector('.js-level-01-cont');

if (targetList.style.display !== 'block') {
clickTarget.classList.add('is-open');
targetList.classList.add('is-open');
targetList.style.display = 'block';
} else {
clickTarget.classList.remove('is-open');
targetList.classList.remove('is-open');
targetList.style.display = 'none';
}
};

const level03ToggleSp = (e) => {
e.preventDefault();
e.stopPropagation();
let clickTarget = e.currentTarget;
let trigger = clickTarget.closest('.js-level-02-trigger');
let targetList = trigger.querySelector('.js-level-02-cont');

if (targetList.style.display !== 'block') {
clickTarget.classList.add('is-open');
targetList.classList.add('is-open');
targetList.style.display = 'block';
} else {
clickTarget.classList.remove('is-open');
targetList.classList.remove('is-open');
targetList.style.display = 'none';
}
};

const menuLevel23Open = () => {
if (windowPCorSP()) {
/*--- PCのときのイベント設定 ---*/

/* リサイズでレスポンシブ時 */
for (let i = 0; i < level_01_cont.length; i++) {
if (level_01_cont[i].classList.contains('is-open')) {
initializationLevel();
}
};
mainMenu.style.display = '';


if(menuTiggerBtn.classList.contains('active')) {
menuTiggerBtn.classList.remove('active');
};

for (let i = 0; i < level_01_trigger.length; i++) {
/* 2階層目OPEN ホバー ドロップダウン */
level_01_trigger[i].addEventListener('mouseenter', level02Open);

/* 2階層目OPEN ホバーアウト ドロップアップ */
level_01_trigger[i].addEventListener('mouseleave', level02Close);
};

/* 3階層目OPEN ホバー ドロップダウン */
for (let i = 0; i < level_02_trigger.length; i++) {
level_02_trigger[i].addEventListener('mouseenter', level03Open);

/* 3階層目OPEN ホバーアウト ドロップアップ */
level_02_trigger[i].addEventListener('mouseleave', level03Close);
};

for (let i = 0; i < level_02_trigger.length; i++) {
let toggle_icon = level_02_trigger[i].querySelector('.toggle_icon');
/* 2階層目OPEN クリックトグル */
toggle_icon.removeEventListener('click', level02ToggleSp);
};

for (let i = 0; i < level_02_trigger.length; i++) {
let toggle_icon = level_02_trigger[i].querySelector('.toggle_icon');
/* 2階層目OPEN クリックトグル */
toggle_icon.removeEventListener('click', level03ToggleSp);
};

} else {
/*--- SPのときのイベント設定 ---*/
menuTiggerBtn.style.display = '';

if (!menuTiggerBtn.classList.contains('active')) {
mainMenu.style.display = 'none';
};

for (let i = 0; i < level_01_trigger.length; i++) {
/* 2階層目OPEN ホバー ドロップダウン */
level_01_trigger[i].removeEventListener('mouseenter', level02Open);

/* 2階層目OPEN ホバーアウト ドロップアップ */
level_01_trigger[i].removeEventListener('mouseleave', level02Close);
};

for (let i = 0; i < level_02_trigger.length; i++) {
/* 3階層目OPEN ホバー ドロップダウン */
level_02_trigger[i].removeEventListener('mouseenter', level03Open);

/* 3階層目OPEN ホバーアウト ドロップアップ */
level_02_trigger[i].removeEventListener('mouseleave', level03Close);
};

for (let i = 0; i < level_01_trigger.length; i++) {
let toggle_icon = level_01_trigger[i].querySelector('.toggle_icon');
/* 2階層目OPEN クリックトグル */
toggle_icon.addEventListener('click', level02ToggleSp);
};

for (let i = 0; i < level_02_trigger.length; i++) {
let toggle_icon = level_02_trigger[i].querySelector('.toggle_icon');
/* 3階層目OPEN クリックトグル */
toggle_icon.addEventListener('click', level03ToggleSp);
};
};
};

/*------------- ドロップダウン ナビゲーション END -------------*/

/*------------- ハンバーガーメニュー START -------------*/
const menuTiggerBtn = document.querySelectorAll('.js-menu-trigger_btn')[0];

menuTiggerBtn.innerHTML = ('\
<span class="modal_close_border"></span>\
<span class="modal_close_border"></span>\
<span class="modal_close_border"></span>\
');

menuTiggerBtn.addEventListener('click', function() {
menuTiggerBtn.classList.toggle('active');
if (menuTiggerBtn.classList.contains('active')) {
mainMenu.style.display = '';
} else {
mainMenu.style.display = 'none';
}
});
/*------------- ハンバーガーメニュー END -------------*/

/*------------- PC or SPでGナビの表示非表示を切り替える START -------------*/
const mainMenuDisplay = () => {
if (windowPCorSP()) {
mainMenu.style.display = '';
menuTiggerBtn.classList.remove('active');
menuTiggerBtn.style.display = 'none';
} else {
mainMenu.style.display = 'none';
menuTiggerBtn.style.display = '';
}
};
/*------------- PC or SPでGナビの表示非表示を切り替える END -------------*/

/*--- ウィンドウのリサイズ完了後の処理 ---*/
const windowResize = () => {
let timer = 0;
let delay = 200;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => {
menuLevel23Open();
}, delay);
}, false);
};

menuLevel23Open();
mainMenuDisplay();
windowResize();

});

/*--- ページ内遷移ずれる対策 ---*/
window.addEventListener('load', () => {
const headerSec = document.querySelector('.js-navi_custom_sec'); /* 擬似ナビ（2段）を取得 */
if (headerSec) {
const headerHeight = headerSec.offsetHeight; /* 擬似ナビ（2段）の高さを取得 */
/* 固定ナビの場合の処理 */
if (headerSec.classList.contains('fixed')) {
document.documentElement.style.setProperty('--navi-height', `${headerHeight}px`);
}
}
});
/*--- ページ内遷移ずれる対策 END ---*/
/* ---------------------------
擬似ナビ（2段） END
--------------------------- */
</script>

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

//旧CMS用（不要であれば削除）
//新CMS用（不要であれば削除）
と2つ記述を用意している箇所がいくつかありますので必要に応じて削除orコメントアウトを外してください。
※デフォルトでは新CMS用の記述が当たるようにしています。

CSSをコピーする

2025-08-14更新（v1.1.0）

/*----- 擬似ナビ（2段） START v1.1.0​​​​​-----*/
// メンビジ上に配置のとき
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-navi_custom_sec {
display: none; //ちらつき防止
* {
box-sizing: border-box; //はみだし防止
}
//固定サイドバー対策
&.has-fixed-side {
@media screen and (min-width: 1201px) {
width: calc(100% - 420px);
}
}
}
&.navi_custom_sec {
// font-family: $font_family;//旧CMS用（不要であれば削除）
font-family: var(--fo-text-font-family);//新CMS用（不要であれば削除）
width: 100%;
background: $header_bg_color;
box-shadow: $navigation_box_shadow_common;
padding: 0;
// オプション 上部固定
&.fixed {
position: sticky;
z-index: 1001;
top: 0;
}
.inner {
max-width: 100%;
padding: 0;
.row {
.col {
padding: 0;
.component {
margin: 0;
&.cta {
.cta-row {
&.navigation-cont_custom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
max-width: 1240px;
min-height: 60px;
padding: 10px 20px;
margin: 0 auto;
@include breakpoint-sp {
min-height: 51px;
padding: 0;
}
.cta-column {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
&.logo_col {
width: auto !important;
@include breakpoint-sp {
padding: 0 0 0 10px;
}
.component {
&.image {
a {
display: inline-block;
}
img {
@include breakpoint-pc {
width: $header_logo !important;
// max-height: 50px;
}
@include breakpoint-sp {
max-height: $header_sp_logo;
}
}
}
}
}
&.btn_col {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
width: auto !important;
padding: 10px 0;
@include breakpoint-sp {
padding: 0 65px 0 0;
}
.component {
&.button {
&:not(:first-child) {
margin-left: 10px;
@include breakpoint-sp {
margin-left: 0;
}
}
.button-cont {
a {
&.size-s {
@include breakpoint-sp {
width: auto;
min-width: auto;
margin: 0;
padding: 5px 10px 5px 5px;
border: 0;
border-radius: 0;
font-size: 0 !important;
letter-spacing: 0;
background: none !important;
}
&::before {
@include breakpoint-sp {
font-size: 22px;
margin: 0;
// color: $main_color;//旧CMS用（不要であれば削除）
color: var(--fo-main-color);//新CMS用（不要であれば削除）
}
}
}
}
}
&.btn_custom_tel {
.button-cont {
a {
&.size-s {
}
}
}
}
}
}
}
}
}
&.menu-trigger_row {
width: max-content;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
@include breakpoint-pc {
display: none;
}
.cta-column {
margin: 0;
padding: 0;
.component {
&.richtext {
&.menu-trigger_btn {
width: 60px;
height: 51px;
margin: 0;
padding: 0;
font-size: 0;
// background-color: $main_color;//旧CMS用（不要であれば削除）
background-color: var(--fo-main-color);//新CMS用（不要であれば削除）
span {
position: absolute;
left: 15px;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 3px;
transition: all .4s;
&:nth-of-type(1) {
top: 15px;
}
&:nth-of-type(2) {
top: 24px;
}
&:nth-of-type(3) {
bottom: 15px;
}
}
&.active {
span {
&:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-45deg);
transform: translateY(10px) rotate(-45deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
-webkit-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg);
}
}
}
}
}
}
}
}
&.main-menu_custom {
min-height: auto;
margin: 0;
padding: 0;
background: $navigation_bg_color;
//SP用
@include breakpoint-sp {
max-height: calc(100vh - 51px);
overflow-y: auto;
/*----
//スクロールバー非表示
-ms-overflow-style: none; //Edge
scrollbar-width: none; //Firefox
&::-webkit-scrollbar {
display: none;
}
----*/
}
.cta-column {
margin: 0;
padding: 0;
.component {
&.richtext {
&.menu_lists {
//PC用
@include breakpoint-pc {
ul {
max-width: 1140px;
display: table;
width: 100%;
margin: 0 auto;
text-align: center;
list-style: none;
li {
position: relative;
box-sizing: content-box;
min-width: 90px;
color: $navigation_text_color;
p {
margin: 0;
}
a {
display: block;
text-decoration: none;
font-size: $navigation_font_size;
font-weight: $navigation_font_weight;
line-height: 1.15;
color: $navigation_text_color;
padding: 20px 10px;
&:hover {
opacity: 1;
}
}
}
.js-level-01,
.js-level-01-trigger {
display: table-cell;
color: $navigation_text_color;
&:hover {
background-color: $navigation_hover_bg_color;
> a {
color: $navigation_hover_text_color;
}
}
}
.js-level-01-trigger {
padding-right: 20px;
//三角部分
&::after {
position: absolute;
right: 10px;
top: 50%;
font-family: $font_family_awsm;
content: "\f107";
color: $navigation_arrow1_color;
margin-top: 0;
transform: translateY(-50%);
font-size: 20px;
line-height: 1;
}
&:hover::after {
color: $navigation_hover_text_color;
transform: rotate(180deg) translateY(50%);
}
}
.js-level-01-cont {
display: block;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
background-color: $navigation_bg2_color;
}
.js-level-02,
.js-level-02-trigger {
display: block;
a {
padding: 20px;
color: $navigation_text2_color;
&:hover {
color: $navigation_hover_text2_color;
background-color: $navigation_hover_bg2_color;
}
}
}
.js-level-02-trigger {
&::after {
position: absolute;
right: 7px;
top: 50%;
font-family: $font_family_awsm;
content: "\f105";
margin-top: 0;
color: $navigation_arrow2_color;
font-size: 20px;
transform: translateY(-50%);
}
&:hover::after {
color: $navigation_hover_text_color;
}
}
.js-level-02-cont {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 100%;
background-color: $navigation_bg2_color;
}
.js-level-03 {
a {
padding: 20px;
color: $navigation_text2_color;
&:hover {
color: $navigation_hover_text2_color;
background-color: $navigation_hover_bg2_color;
}
}
}
}
}
//SP用
@include breakpoint-sp {
ul {
list-style: none;
margin: 0;
li {
p {
margin: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
font-size: $navigation_sp_font_size;
color: $navigation_sp_text_color;
&:hover {
color: $navigation_sp_hover_text_color;
background: $navigation_sp_bg_color;
span.toggle_icon {
&::before {
color: $navigation_sp_hover_text_color;
}
}
}
}
}
.js-level-01 {
a {
padding: 20px 10px;
}
}
.js-level-02,
.js-level-02-trigger,
.js-level-03 {
a {
&:hover {
background: $navigation_sp_bg3_color;
color: $navigation_sp_text3_color;
span.toggle_icon {
&::before {
color: $navigation_sp_text3_color;
}
}
}
}
}
.js-level-02 {
a {
padding: 20px 30px 20px calc(10px + 1em);
}
}
.js-level-03 {
a {
padding: 20px 30px 20px calc(10px + 2em);
}
}
.js-level-01-trigger {
> a,
> strong a {
padding: 20px 30px 20px 10px;
}
}
.js-level-02-trigger {
> a,
> strong a {
padding: 20px 30px 20px calc(10px + 1em);
}
}
.js-level-01-trigger,
.js-level-02-trigger {
a {
span.toggle_icon {
&::before {
content: "\f107";
display: flex;
justify-content: center;
align-items: center;
font-family: $font_family_awsm;
font-size: 30px;
line-height: 1;
color: $navigation_sp_arrow1_color;
width: 30px;
height: 100%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
// 2階層目, 3階層目オープン時
&.is-open {
&::before {
content: "\f106";
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*----- 擬似ナビ（2段） END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2024-09-13更新（v1.0.0）

/*-- 擬似ナビ（2段） 編集画面用 2段 START v1.0.0​​​​​--*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-navi_custom_sec {
display: block;
}
&.navi_custom_sec {
padding: 50px 0;
&.fixed {
position: relative;
top: initial;
border: 1px solid blue;
&::before {
content: "疑似ナビゲーション上部固定中（クラス名：fixed）";
color: #fff;
background: blue;
font-size: 13px;
position: absolute;
right: 0;
top: -24px;
padding: 0 5px;
}
}
.inner {
padding: 20px;
.row {
.col {
.component {
&.cta {
.cta-row {
&.menu-trigger_row {
display: block;
width: 100%;
border: 1px solid #000;
position: relative;
top: initial;
right: initial;
.cta-column {
width: 100%;
}
&::before {
content: "ハンバーガーメニュー（削除しないでください）";
color: #fff;
background: #000;
font-size: 13px;
position: absolute;
right: 0;
top: -24px;
padding: 0 5px;
}
}
&.main-menu_custom {
.cta-column {
.component {
&.richtext {
&.menu_lists {
ul {
li {
display: table-cell !important;
> ul {
display: none !important;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*-- 擬似ナビ（2段） 編集画面用 2段 END --*/

※変数が不足している場合は、下記をご活用ください。

CSSをコピーする

2024-09-13更新（v1.0.0）

// v1.0.0​​​​​
&.navi_custom_sec {
//フォント
$font_family_awsm: "FontAwesome";

//ボックスシャドウ
$navigation_box_shadow_common: 0 3px 8px rgba(#000, 0.1); //ナビゲーション専用

//ナビゲーションロゴ
$header_logo: 300px; //PCでの幅サイズ（固定）
$header_sp_logo: 35px; //SPでの高さサイズ（maxサイズ）

//グロナビ PC
$header_bg_color: var(--fo-background-color1); //ナビゲーション全体の背景色
$navigation_bg_color: $header_bg_color; //グロナビの背景色
$navigation_font_size: 14px; //グロナビのフォントサイズ（1〜3階層）
$navigation_font_weight: normal; //グロナビのフォントの太さ（1〜3階層） normal or bold
$navigation_hover_opacity: 1; //グロナビをホバーした時の透視度
$navigation_bg2_color: $navigation_bg_color; //グロナビの背景色（2階層以下）
$navigation_text_color: var(--fo-text-main-color); //グロナビのテキストカラー
$navigation_text2_color: $navigation_text_color; //グロナビのテキストカラー（2階層以下）
$navigation_hover_bg_color: #fff; //グロナビをホバーした時の背景色
$navigation_hover_bg2_color: var(--fo-main-color); //グロナビをホバーした時の背景色（2階層以下）
$navigation_hover_text_color: var(--fo-main-color); //グロナビをホバーした時のテキストカラー
$navigation_hover_text2_color: $navigation_hover_text_color; //グロナビをホバーした時のテキストカラー（2階層以下）
$navigation_arrow1_color: #aaa; //矢印カラー（1階層）
$navigation_arrow2_color: $navigation_arrow1_color; //矢印カラー（2階層）

//グロナビ ハンバーガーメニュー
$navigation_sp_font_size: 14px; //ハンバーガーメニュー（SP）時のテキストサイズ（1〜3階層）
$navigation_sp_font_weight: normal; //ハンバーガーメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$navigation_sp_text_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー １階層
$navigation_sp_text2_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー（2階層）
$navigation_sp_text3_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー（3階層）
$navigation_sp_hover_text_color: #fff; //ハンバーガーメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$navigation_sp_arrow1_color: $navigation_sp_text_color; //ハンバーガーメニュー（SP） 矢印カラー（1階層）
$navigation_sp_arrow2_color: $navigation_sp_text2_color; //ハンバーガーメニュー（SP） 矢印カラー（2階層）
$navigation_sp_bg_color: var(--fo-main-color); //ハンバーガーメニュー（SP）時の背景色（1階層）
$navigation_sp_bg2_color: #fff; //ハンバーガーメニュー（SP）時の背景色（２階層）
$navigation_sp_bg3_color: #eee; //ハンバーガーメニュー（SP）時の背景色（3階層）
$navigation_sp_border-bottom: 1px dashed var(--fo-main-color); //ハンバーガーメニュー（SP）時のボーダー（hamburger_custom 使用時）
}
JSパーツ集ロゴ

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

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

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.