追加可能 |
変更可能箇所 | NG | 同一ページ に複数設置 |
ページ複製・クリップボード使用可否 |
|---|---|---|---|---|
|
■ナビ部分
|
JS変更箇所
|
■メニューに追加NG
（▼自動吐き出しパーツ）※4
|
× | ◯ ※6 |
| 留意事項 | |||
|---|---|---|---|
|
○構造・仕様上の制約
○使用可否のパーツ
○更新・運用時の注意
○編集時のルール
○表示崩れ・不安定挙動に関する注意
|
- CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
①メガメニューを表示させたいページでの設定
- [メガメニューを表示するページ]を作成。
- 編集画面内の設定から、「ナビゲーションを表示する」のチェックを外す。
- JavaScriptをフッター等に配置。
※②メガメニュー編集用ページでの設定の4の手順が完了してから行なってください。 - 格納用の空セクションを用意し、クラス名「js-megaMenu_contents_sec」を追加。
メインビジュアルやフッター前などに配置する。
※このセクションがないと、メガメニューが反映されません。
②-1メガメニュー編集用ページでの設定
- [メガメニューを表示するページ]の下の階層に、[メガメニュー編集用ページ]を新規作成。
-
[メガメニュー編集用ページ]の共通エリア設定で、「共通ヘッダーを使用」をOFFにする。
-
[サイト内検索の検索結果から除外する]と[NOINDEX]にチェックを入れる。
- 任意のURLを設定。
例：mega-menu03-parts - コピーしたJavaScript内の、【const megaMenuPartsPath = '/js/mega-menu03-parts';】の'URL部分'を手順4で設定したURLに変更する。
例：URLがmega-menu-partsの場合 →【const megaMenuPartsPath = '/mega-menu-parts';】 -
[メガメニュー編集用ページ]の編集画面に入り、
「ヘッダー・フッター・パンくずリストの表示」をONにする。
※検索結果画面で表示されるレイアウトは[メガメニュー編集用ページ]のレイアウト設定に依存します。 -
フッターにメガメニュー用のJSパーツが埋め込んであることを確認。
-
ヘッダー（メインビジュアル部分）を格納用セクションにするため、ヘッダーにクラス名「js-megaMenu_contents_sec」を追加。
-
セクションを新規作成し、
クラス名「js-megaMenu_custom_sec mega03Menu_custom_sec fixed」を追加。
※ナビを固定したくない場合、クラス「fixed」は削除してください。 - 上記セクション内で行（row）を新規作成し、クラス名「navigation-cont_row」を追加。
- 上記行（row）を2分割する。
左のカラム（col）にクラス名「logo_col」を追加。
右のカラム（col）にクラス名「cont_col」を追加。
※ロゴ画像「logo_img（デフォルトで準備）」やボタンは必要があれば追加。
※別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用。 - 上記行（row）のすぐ下に新規行（row）をもう一つ作成し、クラス名「nav_menu_row」を追加。
中にリンクリストを配置し、クラス名「nav_menu_list」を追加。→第2階層のリンクを設定。 - 上記セクションのすぐ下に新規セクションを作成し、
クラス名「js-megaMenu_down_list_sec mega03Menu_down_list_sec」を追加。 - 上記セクション内で、行（row）を新規作成し、クラス名「js-downMenu_reference_row」を追加。
- 行「js-downMenu_reference_row」内にリッチテキストを配置し、先程設定した第2階層のメニュー名と合わせる。
（リッチテキストにはクラスの追加不要）※仕組みは構造図参照 - 「js-downMenu_reference_row」の下に新規行（row）を作成し、デザインに合わせて通常通りパーツを置く。
※例として、デモでは「sub_menu_list_row」を準備。（詳細はCSS参照）必要に応じて活用してください。
※ボックスリンクを設置する場合、デザインパーツではなくデフォルトパーツを使用し、従来のクラス付与の方法（colに「box_link_col」、追加ボタンパーツに「btn_custom_boxlink」を付与）で設定してください。
※別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用。 -
第2階層のメニューを表示させたい分だけセクションを用意し、手順13〜16と同じ流れで設定してください。
②-2擬似ナビと同じプルダウンのナビを使用する場合
- クラス名「js-megaMenu_down_list_sec mega03Menu_down_list_sec」の他に「js-megamenu_pullList_sec」を追加。
- その中の行（row）にクラス名「sub_menu_list_row」を追加。
- リッチテキストを配置し、クラス名「js-menu_lists menu_lists」を追加。
リッチテキストのリスト機能を使用して、第一階層〜第三階層までリンクを設定。
【新CMSの場合】
別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用可能です。
※デザパは使用禁止です。
rowについても新規作成した方が確実にCSSの影響を受けないので安心かと思います。
注意点
- 共通パーツ内のリッチテキストは時々意図しない挙動になり崩れる恐れがあるので注意してください。
※半角スペースが入っていると崩れたりなど
※コピーだと余計なタグを持ってくることがあるので手入力推奨
-
第二階層の数について制限はありませんが、閲覧者のモニターの高さによっては見切れる可能性があります。個数的にははっきり言えませんが、10個以上はおすすめはしません。
- ページ内にフェードインのアニメーションを使用しているとページ内リンクのスクロール位置がズレます。これは共通ナビでも発生する仕様ですのでご注意ください。
-
擬似ナビ設置ページでメンビジを使用する際は、擬似ナビとメンビジの表示位置が公開画面と逆になりますのでご注意ください。
-
アップセル等でCSSが古い場合があるので、カスタムCSSに「scroll-behavior: smooth;」が適用されているか必ず確認して下さい。こちらのスタイルが当たっていないとスムーズスクロールが効きません。
-
メニューリストを作成する際にプレーンテキストをコピペした場合、作成後のメニューリストのHTML構造が「ul > li > div > aになっていることを確認してください。li > p > aの構造になっていた場合、リスト化を解除した上でもう一度リスト化し li > div > aに構造が変更されていることを確認してください。 JSがうまくあたらない場合、divが生成されていない可能性があります。（詳しくは設定方法をご覧ください）
- jQuery
- JS
- CSS
- 編集画面用CSS
JavaScript埋め込みパーツを設置し、CDNで読み込んだ最新バージョンのjQueryを反映させます。
※jQueryコンフリクト回避 のため
複数のJSパーツを使用する場合は、こちらの①jQueryの読み込みは一度だけで大丈夫です。
2024-01更新（v1.0.0）
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/*--- jQueryコンフリクト回避 v1.0.0---*/
jQuery.noConflict();
/*--- この下にJavaScriptを記述していく---*/
</script>
2025-12-19更新（v1.1.0）
<script>
/* ---------------------------
メガメニュー（2段・プルダウンあり） v1.0.0
--------------------------- */
/*--- PC or SP 判定 ---*/
function windowPCorSP() {
if (window.matchMedia('(min-width: 770px)').matches) {
/* 画面幅が770px以上のときの処理(PC) */
return 'pc';
} else {
/* 画面幅が769px以下のときの処理(SP) */
return 'sp';
}
};
jQuery(function() {
/*---------------------------------
初期化 (変数定義やクラス付与) START
---------------------------------*/
/* メガメニューのパーツを配置しているURLのパスを指定する (先頭に「/」を入れてください) */
const megaMenuPartsPath = '/js/mega-menu03-parts';
/* メガメニューを一時的に格納するセクション */
const megaMenuTemporarilyContentsSec = jQuery('.js-megaMenu_contents_sec');
/* theme-fo-base */
const themeFoBase = jQuery('#fo-base');
/* メインビジュアル（main-visual） */
const mainVisual = jQuery('.main-visual');
/*------------- 初期化 (変数定義やクラス付与) END -------------*/
/*------------- メガメニューを別ページから読み込んで初期機能設定 START -------------*/
megaMenuTemporarilyContentsSec.load(`${megaMenuPartsPath} .contents`,
function() {
/*---------------------------------
メガメニューPC時 START
---------------------------------*/
/* ヘッダーメガメニュー */
const megaMenuSec = jQuery('.js-megaMenu_custom_sec');
/* メガダウンメニュー */
const megaDownMenuSec = jQuery('.js-megaMenu_down_list_sec');
/* メガダウンメニュー02 */
const megaDownMenuSec02 = jQuery('.js-megamenu_pullList_sec');
/* メガメニューナビゲーションリンク */
const nav_menu_link = jQuery('.js-megaMenu_custom_sec .nav_menu_list a');
/* ダウンメニューか否か判定用テキスト */
const downMenu_reference_text = jQuery('.js-downMenu_reference_row p');
/* メガメニュー要素以外のセクションを駆除 */
jQuery('.js-megaMenu_contents_sec section').not(
'.js-megaMenu_custom_sec, .js-megaMenu_down_list_sec').css('display',
'none');
/* メガメニューを「#fo-base」の上に配置 */
megaMenuTemporarilyContentsSec.insertBefore(themeFoBase);
/* メガメニューを囲んでいる不要なタグを削除 */
megaMenuSec.unwrap().unwrap();
/* JSで「display: none;」を付与して、チラツキ防止用クラスを外す */
megaDownMenuSec.css('display', 'none');
/*--- ダウンメニューか否か判定してクラスを付与 ----*/
nav_menu_link.each(function(index01, element01) {
downMenu_reference_text.each(function(index02, element02) {
if (jQuery(element01).text() === jQuery(element02).text()) {
/* idを生成 */
let id = index01 + 101;
let list = jQuery(element01).parent();
let downMenu = jQuery(element02).closest(
'.js-megaMenu_down_list_sec');
/* ダウンメニューをリンクリスト内部に移動 */
downMenu.appendTo(list);
/* ダウンメニュー用のクラスを付与 */
list.addClass('downMenu');
/* ダウンメニュー用のidをdata属性で付与 */
list.attr('data-mega-target', `${id}`);
/* ダウンメニュー用のidをdata属性で付与 */
downMenu.attr('data-mega-id', `${id}`);
}
});
});
/* 判定用に使用したテキストを削除 */
jQuery('.js-downMenu_reference_row').css('display', 'none');
/* ダウンメニューのリンクのみを取得 */
const downMenuLink = jQuery(
'.js-megaMenu_custom_sec .nav_menu_list .downMenu');
/*ダウンメニューをホバーしたときにサブメガメニューを開く */
downMenuLink.hover(function() {
/*--- マウスカーソルが重なった時の処理 ---*/
jQuery(this).addClass('is-opened');
let hoverLinkId = jQuery(this).attr('data-mega-target');
let downMenu = jQuery(`[data-mega-id="${hoverLinkId}"]`);
downMenu.css('display', '');
}, function() {
/*--- マウスカーソルが離れた時の処理 ---*/
let hoverLinkId = jQuery(this).attr('data-mega-target');
let downMenu = jQuery(`[data-mega-id="${hoverLinkId}"]`);
downMenu.css('display', 'none');
jQuery(this).removeClass('is-opened');
});
function pcMegaMenuSetUp() {
/* js-megamenu_pullList_sec を持つ downMenu に position: relative を追加 */
megaDownMenuSec02.closest('.downMenu').css('position',
'relative');
/* js-menu_lists 内の ul と li にクラスを付与 */
/* メインメニュー（Gナビ） */
const mainMenu = jQuery('.js-menu_lists').first();
/* 1階層目 */
const level_01 = jQuery('.js-menu_lists > div > ul > li');
level_01.each(function() {
jQuery(this).addClass('js-level-01');
});
/* 2階層目 */
const level_02 = jQuery('.js-menu_lists > div > ul > li > ul > li');
level_02.each(function() {
jQuery(this).addClass('js-level-02');
});
/* 3階層目 */
const level_03 = jQuery('.js-menu_lists > div > ul > li > ul > li > ul > li');
level_03.each(function() {
jQuery(this).addClass('js-level-03');
});
/* 1階層目トリガー */
level_01.each(function() {
const el = jQuery(this);
if (el.find('.js-level-02').length > 0) {
el.addClass('js-level-01-trigger').removeClass('js-level-01');
const iconElement = jQuery('<span class="toggle_icon"></span>');
const link = el.find('a').first();
if (link.length) {
link.append(iconElement);
}
}
});
/* 2階層目 [ul] */
level_02.each(function() {
const level_01_cont = jQuery(this).parent();
level_01_cont.addClass('js-level-01-cont').hide();
});
/* 2階層目トリガー */
level_02.each(function() {
const el = jQuery(this);
if (el.find('.js-level-03').length > 0) {
el.addClass('js-level-02-trigger').removeClass('js-level-02');
const iconElement = jQuery('<span class="toggle_icon"></span>');
const link = el.find('a').first();
if (link.length) {
link.append(iconElement);
}
}
});
/* 3階層目 [ul] */
level_03.each(function() {
const level_02_cont = jQuery(this).parent();
level_02_cont.addClass('js-level-02-cont').hide();
});
/*------------- 初期化 (変数定義やクラス付与) END -------------*/
/*------------- イベント設定 START -------------*/
function setupTriggerEvents(triggerSelector, targetSelector) {
if (windowPCorSP() === 'pc') {
/* PC時はクリックイベントを削除し、ホバーのみにする */
jQuery(triggerSelector).off('click').hover(function() {
const targetCont = jQuery(this).find(targetSelector).first();
if (targetCont.length) {
targetCont.css('display', 'block'); /* ホバー時に表示 */
}
}, function() {
const targetCont = jQuery(this).find(targetSelector).first();
if (targetCont.length) {
targetCont.css('display', 'none'); /* ホバーを外したら非表示 */
}
});
}
}
/* 1階層目トリガーのクリックイベント */
setupTriggerEvents('.js-level-01-trigger', '.js-level-01-cont');
/* 2階層目トリガーのクリックイベント */
setupTriggerEvents('.js-level-02-trigger', '.js-level-02-cont');
/*------------- イベント設定 END -------------*/
/* PCのみでホバー処理：li内にulがある場合 */
if (windowPCorSP() === 'pc') {
jQuery('.js-megaMenu_custom_sec .js-menu_lists li').has('ul').hover(function() {
jQuery(this).children('ul').css('display', 'block');
}, function() {
jQuery(this).children('ul').css('display', 'none');
});
}
}
/*------------- メガメニューPC時 END -------------*/
/*---------------------------------
メガメニューSP時 START
---------------------------------*/
/*--- 変数定義 ---*/
/* ハンバーガーメニューボタン */
const megaMenuTriggerElement = jQuery('<div class="megaMenu_trigger">' +
'<span></span>' + '<span></span>' + '<span></span>' + '</div>');
const mainMegaMenuElement = jQuery(
'<nav class="main-megaMenu"><ul></ul></nav>');
function spMegaMenuSetUp() {
/* ハンバーガメニューを挿入＆削除 */
if (windowPCorSP() === 'sp' && !jQuery('.megaMenu_trigger').length) { /*--- 画面幅SPのとき ---*/
/* ハンバーガメニューボタンとメインメニューを追加 */
megaMenuTriggerElement.appendTo('.js-megaMenu_custom_sec > .inner').ready(
function() {
mainMegaMenuElement.insertAfter('.megaMenu_trigger');
const megaMenuTrigger = jQuery('.megaMenu_trigger');
const mainMegaMenu = jQuery('.main-megaMenu');
mainMegaMenu.css('display', 'none');
/* メインメニューにメニュー要素を追加 */
nav_menu_link.parent().clone().appendTo('.main-megaMenu > ul');
/* メニューの下層（プルダウン）要素を追加する */
/* 1階層目のメニューを取得 */
const level01 = jQuery('.main-megaMenu > ul > li');
level01.addClass('js-level-01');
level01.each(function(index01, element01) {
let id = jQuery(element01).attr('data-mega-target');
let section = jQuery(
`.main-megaMenu .js-megaMenu_down_list_sec[data-mega-id="${id}"]`
);
/* ボタンパーツの場合 */
let buttonLink = section.find('.button a').clone();
let buttonLinkList = buttonLink.removeClass().addClass(
'wrap-item');
if (buttonLink.length) {
buttonLinkList.appendTo(jQuery(element01));
}
/* リッチテキストもしくはリンクリストの場合 */
/* 新リッチ/旧リッチともに UL だけをクローン（wrapper DIV は連れてこない） */
let v2Ul = section
.find('.styles_richtext-v2-content__l0LFT > ul, [data-designpart="rich-text-normal-v2"] ul')
.first();
let legacyUl = section
.find('.richtext > div > ul, .richtext > ul, .list > ul')
.first();
if (v2Ul.length) {
v2Ul.clone(false).appendTo(jQuery(element01));
} else if (legacyUl.length) {
legacyUl.clone(false).appendTo(jQuery(element01));
}
section.css('display', 'none');
});
jQuery('.main-megaMenu .js-megaMenu_down_list_sec').css('display',
'none');
jQuery('.wrap-item').wrap('<li class="js-level-02">');
jQuery('.wrap-item').removeAttr('class');
level01.each(function(index, element) {
let target = jQuery(element).find('.js-level-02');
target.wrapAll('<ul class="js-level-01-cont">');
});
/* 1階層目 */
const level01List = jQuery('.main-megaMenu > ul > li');
const level02List = jQuery('.main-megaMenu > ul > li > ul > li');
const level03List = jQuery(
'.main-megaMenu > ul > li > ul > li > ul > li');
const level04List = jQuery(
'.main-megaMenu > ul > li > ul > li > ul > li > ul > li');
level01List.addClass('js-level-01');
level02List.addClass('js-level-02');
level03List.addClass('js-level-03');
level04List.addClass('js-level-04');
level02List.closest('ul').addClass('js-level-01-cont');
level03List.closest('ul').addClass('js-level-02-cont');
level04List.closest('ul').addClass('js-level-03-cont');
const downMenu = jQuery('.downMenu a');
const toggleIconElement = jQuery('<span class="toggle_icon"></span>');
jQuery('.main-megaMenu > ul > li ul').css('display', 'none');
let toggle_icon_link = [];
jQuery('.main-megaMenu > ul li ul').prevAll().each(function(index,
element) {
if (element.tagName.toLowerCase() === 'a') {
toggle_icon_link.push(jQuery(element));
return
} else if (element.tagName.toLowerCase() === 'strong') {
toggle_icon_link.push(jQuery(element).find('a'));
}
});
toggleIconElement.appendTo(toggle_icon_link);
/* 指定したリスト要素に対してテキストノードや <strong> をラップし、アイコンを追加する関数 */
function wrapTextWithIcon(list) {
list.each(function() {
const el = jQuery(this); /* 現在の <li> 要素を変数に格納 */
const hasSubMenu = el.children('ul').length > 0; /* 子ulがあるか */
const hasAnchor = el.children('a, div > a, strong > a').length > 0; /* 見出しがaか */
if (!hasSubMenu || hasAnchor) { return; } /* 子ulなし or a直下なら何もしない */
/* 直下のテキストノードまたは <strong> を取得 */
const textNode = el.contents().filter(function() {
/* テキストノードまたは <strong> を対象にする */
return (this.nodeType === 3 && jQuery(this).text().trim() !==
'') || /^(STRONG|SPAN|EM|B|DIV)$/i.test(this.tagName || '');
});
/* テキストノードまたは <strong> がある場合に処理を実行 */
if (textNode.length > 0) {
/* js-trigger-wrapper と toggle_icon の要素を作成 */
const wrapper = jQuery(
'<span class="js-trigger-wrapper"></span>');
const toggleIcon = jQuery('<span class="toggle_icon"></span>');
/* テキストノードや <strong> の内容を移動 */
textNode.each(function() {
if (this.nodeType === 3) { /* テキストノードの場合 */
const textContent = jQuery(this).text().trim();
wrapper.append(textContent);
jQuery(this).remove(); /* 元のテキストノードを削除 */
} else { /* STRONG/SPAN/EM/B/DIV の場合 */
const strongContent = jQuery(this).text().trim();
wrapper.append(strongContent);
jQuery(this).remove(); /* 元の要素を削除 */
}
});
/* toggle_icon を追加 */
wrapper.append(toggleIcon);
/* 親要素の先頭に挿入 */
el.prepend(wrapper);
}
});
}
/* level02List に対して処理を実行 */
level02List.each(function() {
const el = jQuery(this); /* 現在の <li> 要素を変数に格納 */
const hasSubMenu = el.children('ul').length > 0;
const hasAnchor = el.children('a, div > a, strong > a').length > 0;
/* level02List の処理 */
if (hasSubMenu && !hasAnchor) {
wrapTextWithIcon(el);
}
/* level03List の処理を追加 */
const level03List = el.find('> ul > li'); /* level03 の <li> を取得 */
level03List.each(function() {
const level03El = jQuery(this);
/* 条件: <li> 直下に <ul> があるかつ <a> タグで囲われていない場合 */
const hasSubMenu3 = level03El.children('ul').length > 0;
/* 直下に <ul> があるか確認 */
const hasAnchor3 = level03El.children('a, div > a, strong > a').length > 0;
/* <a> タグがあるか確認 */
if (hasSubMenu3 && !hasAnchor3) {
wrapTextWithIcon(level03El);
}
});
});
jQuery(
'.downMenu a .toggle_icon, .downMenu .js-trigger-wrapper > .toggle_icon'
).on('click', function(e) {
e.preventDefault();
e.stopPropagation();
let list = jQuery(this).closest('li');
let openTarget = list.children('ul');
jQuery(this).toggleClass('is-open');
openTarget.toggleClass('is-open');
openTarget.stop(true, true).slideToggle(300);
});
/* ハンバーガメニュークリックイベント */
megaMenuTrigger.on('click', function() {
megaMenuTrigger.toggleClass('is-active');
mainMegaMenu.toggleClass('is-active');
mainMegaMenu.toggle();
jQuery('html').toggleClass('is-locked');
megaMenuSec.toggleClass('is-open');
});
});
} else if (windowPCorSP() === 'pc') { /*--- 画面幅PCのとき ---*/
/* ハンバーガメニューボタンとメインメニューを削除 */
jQuery('.megaMenu_trigger').removeClass('is-active');
jQuery('.main-megaMenu').removeClass('is-active');
jQuery('.megaMenu_trigger').css('display', 'none');
jQuery('.main-megaMenu ul li').css('display', 'none');
jQuery('.main-megaMenu').css('display', 'none');
jQuery('.downMenu a .toggle_icon').css('display', 'none');
/* ハンバーガメニューが開いてるときのクラス名を削除 */
jQuery('html').removeClass('is-locked');
jQuery('is-open').removeClass('is-open');
}
};
/*------------- メガメニューSP時 END -------------*/
/* 初期化: PCのみで関数を実行 */
if (windowPCorSP() === 'pc') {
pcMegaMenuSetUp(); /* PCの場合にのみ実行 */
}
/*--- ウィンドウのリサイズ完了後の処理 ---*/
const windowResize = () => {
let timer = 0;
let delay = 100;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => {
spMegaMenuSetUp();
}, delay);
}, false);
};
spMegaMenuSetUp();
windowResize();
});
/*------------- メガメニューを別ページから読み込んで初期機能設定 END -------------*/
});
/*--- ページ内遷移ずれる対策 ---*/
window.addEventListener('load', () => {
setTimeout(() => {
const headerSec = document.querySelector('.js-megaMenu_custom_sec'); /* メガメニューを取得 */
if (headerSec) {
const headerHeight = headerSec.offsetHeight; /* メガメニューの高さを取得 */
/* 固定ナビの場合の処理 */
if (headerSec.classList.contains('fixed')) {
document.documentElement.style.setProperty('--navi-height',
`${headerHeight}px`);
}
}
}, 300);
});
/*--- ページ内遷移ずれる対策 END ---*/
/* ---------------------------
メガメニュー（2段・プルダウンあり） END
--------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
※新旧どちらにも対応できるようにデフォルトでは固定値で設定しているため、必要に応じて変数を設定してください。
2025-10-28更新（v2.1.1）
/*----- メガメニュー（2段・プルダウンあり） START v1.0.0-----*/
/* --------------------------------
variables（変数）
----------------------------------- */
$mega03-navigation_font_size: $navigation_font_size; //メガメニューのフォントサイズ（1〜3階層）
$mega03-navigation_font_weight: $navigation_font_weight; //メガメニューのフォントの太さ（1〜3階層） normal or bold
$mega03-navigation_text_color: $navigation_text_color; //メガメニューのテキストカラー
$mega03-navigation_text2_color: $navigation_text2_color; //メガメニューのテキストカラー（2階層以下）
$mega03-navigation_bg_color: $header_bg_color; //メガメニューの背景色
$mega03-navigation_bg2_color: $navigation_bg2_color; //メガメニューの背景色（2階層以下）
$mega03-navigation_hover_opacity: $navigation_hover_opacity; //メガメニューをホバーした時の透視度
$mega03-navigation_hover_text_color: $navigation_hover_text_color; //メガメニューをホバーした時のテキストカラー
$mega03-navigation_hover_bg_color: $navigation_hover_bg_color; //メガメニューをホバーした時の背景色
$mega03-navigation_hover_bg2_color: $navigation_hover_bg_color; //メガメニューをホバーした時の背景色
$mega03-navigation_arrow1_color: $mega03-navigation_text_color; //矢印カラー（1階層）
$mega03-navigation_arrow2_color: $mega03-navigation_arrow1_color; //矢印カラー（2階層）
//メガメニュー（2段） ハンバーガーメニュー
$mega03-navigation_sp_font_size: $navigation_sp_font_size; //メガメニュー（SP）時のテキストサイズ（1〜3階層）
$mega03-navigation_sp_font_weight: $navigation_sp_font_weight; //メガメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$mega03-navigation_sp_text_color: $navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー １階層
$mega03-navigation_sp_text2_color: $navigation_sp_text2_color; //メガメニュー（SP）時のテキストカラー（2階層）
$mega03-navigation_sp_text3_color: $navigation_sp_text3_color; //メガメニュー（SP）時のテキストカラー（3階層）
$mega03-navigation_sp_hover_text_color: $navigation_sp_hover_text_color; //メガメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$mega03-navigation_sp_arrow1_color: $navigation_sp_arrow1_color; //メガメニュー（SP） 矢印カラー（1階層）
$mega03-navigation_sp_arrow2_color: $navigation_sp_arrow2_color; //メガメニュー（SP） 矢印カラー（2階層）
$mega03-navigation_sp_bg_color: $navigation_sp_bg_color; //メガメニュー（SP）時の背景色（1階層）
$mega03-navigation_sp_bg2_color: $navigation_sp_bg2_color; //メガメニュー（SP）時の背景色（２階層）
$mega03-navigation_sp_bg3_color: $navigation_sp_bg3_color; //メガメニュー（SP）時の背景色（3階層）
$mega03-navigation_sp_border-bottom: $navigation_sp_border-bottom; //メガメニュー（SP）時のボーダー（hamburger_custom 使用時）
$mega03-navigation_box_shadow_common: $navigation_box_shadow_common;
/*------------- variables（変数）END -------------*/
/* SP時 iOSのアドレスバーズレ防止 */
html {
&.is-locked {
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
&::before {
content: "";
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
}
}
}
//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: none !important;
}
:is(section, section[data-designpart-id]:not(:root):not(:root):not(:root):not(:root)) {
/*-- メガメニュー（2段） 共通設定 --*/
&:is(.mega03Menu_custom_sec, .mega03Menu_down_list_sec) * {
box-sizing: border-box;
}
&:where(.mega03Menu_custom_sec, .mega03Menu_down_list_sec, .js-megamenu_pullList_sec) {
width: 100%;
font-family: "Noto Sans JP", sans-serif; //適宜変更
line-height: 1.5; //適宜変更
letter-spacing: 0.04em; //適宜変更
.inner {
width: 100% !important;
max-width: 100% !important;
margin: auto;
.row {
.col {
.component {
margin: 10px 0;
a {
text-decoration: none;
&:hover {
opacity: $hover_opacity;
}
}
// CTA共通
&.cta {
margin: 0;
.cta-row {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
@include breakpoint-sp {
display: block;
}
& + .cta-row {
@include breakpoint-pc {
padding-top: 10px;
}
}
.cta-column {
display: table-cell;
vertical-align: top;
margin: 0;
@include breakpoint-sp {
display: block;
width: 100% !important;
}
}
}
}
}
}
}
}
}
/*-- メガメニュー（2段）共通設定 END--*/
/*-- メガメニュー（2段） ナビ部分 --*/
&.mega03Menu_custom_sec {
background: $mega03-navigation_bg_color;
box-shadow: $mega03-navigation_box_shadow_common;
position: relative;
z-index: 10;
padding: 0;
// オプション ナビゲーション上部固定のとき
&.fixed {
position: sticky;
z-index: 1001;
top: 0;
}
&.is-open {
@include breakpoint-sp {
box-shadow: none;
}
}
.inner {
.row {
&.navigation-cont_row {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1240px !important;
margin: auto;
padding: 10px 20px;
@include breakpoint-sp {
min-height: 51px;
padding: 0;
}
.col {
padding: 0;
&.logo_col {
display: flex !important;
align-items: center;
justify-content: flex-start;
width: auto !important;
@include breakpoint-sp {
padding: 0 0 0 10px;
}
.component {
margin: 0;
&.image {
&.logo_img {
max-width: $header_logo;
img {
max-height: 56px; //ナビhover時の上矢印▲の位置ズレ対策
@include breakpoint-sp {
max-height: $header_sp_logo;
}
}
}
}
}
}
&.cont_col {
display: flex !important;
align-items: center;
justify-content: flex-end;
width: auto !important;
padding: 10px 0;
@include breakpoint-sp {
padding: 0 68px 0 0;
}
.component {
margin: 0;
&.button {
margin-left: 15px;
@include breakpoint-sp {
margin: 0;
}
.button-cont {
a {
&.size-s {
min-width: 200px;
}
&:is(.size-s, .size-m, .size-l) {
@include breakpoint-sp {
min-width: initial;
border-radius: 0;
padding: 5px;
border: none;
font-size: 0;
background: none;
}
&::before {
@include breakpoint-sp {
font-size: 22px;
color: $mega03-navigation_text_color;
margin: 0;
}
}
}
}
}
&.btn_custom_tel {
.button-cont {
a {
&.size-s {
@include breakpoint-pc {
min-width: initial;
}
@include breakpoint-pro_s {
background: none;
border: none;
border-radius: 0;
font-size: 0;
}
&::before {
@include breakpoint-pro_s {
font-size: 22px;
color: $mega03-navigation_text_color;
margin: 0;
}
}
}
}
}
}
}
}
}
}
}
&.nav_menu_row {
.col {
padding: 0;
.component {
&.list {
&.nav_menu_list {
max-width: 1140px;
margin: 0 auto;
height: 100%;
@include breakpoint-sp {
display: none !important;
}
> ul {
display: table;
width: 100%;
height: 100%;
> li {
display: table-cell;
margin: 0;
padding: 0;
font-size: $mega03-navigation_font_size;
color: $mega03-navigation_text_color;
&:hover {
background-color: $mega03-navigation_hover_bg2_color;
}
&.downMenu {
> a {
position: relative;
padding-right: 30px;
&::after {
content: "\f107";
font-family: $font_family_awsm;
font-size: 20px;
line-height: 1;
color: $mega03-navigation_arrow1_color;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
margin-top: 0;
}
}
}
> a {
display: block;
min-width: 125px;
height: 100%;
text-align: center;
text-decoration: none;
font-weight: $mega03-navigation_font_weight;
line-height: 1.2;
color: $mega03-navigation_text_color;
padding: 20px 10px;
position: relative;
border: 0;
@include breakpoint-pro_s {
min-width: initial;
}
&:hover {
color: $mega03-navigation_hover_text_color;
opacity: $mega03-navigation_hover_opacity;
&::after {
transform: rotate(180deg) translateY(50%);
color: $mega03-navigation_hover_text_color;
}
}
}
}
}
}
}
}
}
}
}
// ハンバーガーメニュー
.megaMenu_trigger {
cursor: pointer;
width: 60px;
height: 51px;
position: absolute;
right: 0;
top: 0;
background: #ffad2f;
span {
display: inline-block;
width: 30px;
height: 3px;
border-radius: 3px;
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: all 0.4s;
&:nth-child(1) {
top: 15px;
}
&:nth-child(2) {
top: 24px;
}
&:nth-child(3) {
bottom: 15px;
}
}
/* ハンバーガメニュー オープン時 */
&.is-active {
span {
&:nth-child(1) {
-webkit-transform: translateY(10px) translateX(-50%) rotate(-45deg);
transform: translateY(10px) translateX(-50%) rotate(-45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
-webkit-transform: translateY(-8px) translateX(-50%) rotate(45deg);
transform: translateY(-8px) translateX(-50%) rotate(45deg);
}
}
}
}
// メインメガメニュー（2段） PC時 {
@include breakpoint-pc {
.main-megaMenu {
display: none;
}
}
// メインメガメニュー（2段） SP時
@include breakpoint-sp {
.main-megaMenu {
height: calc(100vh + 100px);
overflow: auto;
font-family: "Noto Sans JP", sans-serif;
background: #fff;
padding-bottom: 310px;
ul {
li {
a,
.js-trigger-wrapper {
display: block;
position: relative;
padding: 20px;
text-decoration: none;
font-size: $mega03-navigation_sp_font_size;
font-weight: $mega03-navigation_sp_font_weight;
line-height: 1.2;
color: $mega03-navigation_sp_text_color;
border-bottom: 1px dashed #ffad2f;
strong,
span {
font-weight: inherit;
}
}
// .js-trigger-wrapper {
// display: block;
// }
/* 2階層目トリガー */
&.downMenu {
a,
.js-trigger-wrapper {
padding: 20px 45px 20px 20px;
.toggle_icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: 0;
width: 50px;
height: 45px;
transform: translateY(-50%);
&::before,
&::after {
background-color: $mega03-navigation_sp_arrow1_color;
}
&::before {
content: "";
width: 2px;
height: 18px;
transform: rotate(0);
-webkit-transform: rotate(0);
z-index: 1;
transition: all 0.5s ease;
}
&::after {
content: "";
position: relative;
right: 2px;
width: 2px;
height: 18px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: all 0.5s ease;
}
&.is-open {
&::before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
}
}
}
ul {
.js-level-02 {
a,
.js-trigger-wrapper {
padding: 20px 30px 20px calc(20px + 1em);
}
.js-level-03 {
a,
.js-trigger-wrapper {
background: #f2f2f2;
padding: 20px 30px 20px calc(20px + 2em);
}
.js-level-04 {
a {
padding: 20px 30px 20px calc(20px + 3em);
}
}
}
}
}
}
}
}
}
}
}
/*-- メガメニュー（2段） メニュー内 --*/
&.mega03Menu_down_list_sec {
max-width: 1140px;
max-height: 500px;
overflow-y: auto;
background: #fff;
box-shadow: $mega03-navigation_box_shadow_common;
color: $mega03-navigation_text2_color;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1;
margin: auto;
.inner {
padding: 40px 30px;
.row {
// 以下、メニュー内のデザインに合わせて適宜変更（不要であれば削除）
&.sub_menu_list_row {
display: flex;
gap: 45px;
& + .sub_menu_list_row {
margin-top: 20px;
}
.col {
width: 100%;
padding: 0;
position: relative;
.component {
&.richtext {
// メニュー内リスト
&.mega03Menu_list01 {
ul {
li {
display: block;
font-size: 16px;
line-height: 1.5;
color: #333;
margin: 0;
padding: 0;
a {
display: block;
font-size: inherit;
color: inherit;
text-decoration: none;
&:hover {
opacity: $hover_opacity;
}
}
ul {
margin: 0 0 0 10px !important;
li {
margin-top: 10px;
a {
border: none;
}
}
}
}
}
/* 1階層目 */
> ul {
margin: 0;
> li {
& + li {
margin-top: 10px;
}
}
}
}
}
&.list {
// [お知らせ]リスト
&.mega03Menu_list02 {
ul {
li {
display: block;
font-size: 16px;
line-height: 1.5;
color: #333;
margin: 0;
padding: 0;
& + li {
margin-top: 10px;
}
a {
display: block;
text-decoration: none;
font-weight: $mega03-navigation_font_weight;
color: inherit;
padding: 0;
&:hover {
opacity: $hover_opacity;
background: none;
}
}
}
}
}
}
}
}
}
}
}
}
&.js-megamenu_pullList_sec {
display: block;
max-width: none;
max-height: none;
width: 100%;
box-shadow: none;
overflow: initial;
.inner {
padding: 0;
.row {
&.sub_menu_list_row {
.col {
.component {
&.richtext {
&.menu_lists {
margin: 0;
ul {
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0;
li {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
background: $mega03-navigation_bg_color;
padding: 0;
margin: 0;
a {
display: block;
color: $mega03-navigation_text_color;
font-weight: $mega03-navigation_font_weight;
margin: 0;
padding: 20px;
&:hover {
opacity: 1;
}
}
}
.js-level-01,
.js-level-01-trigger {
display: table-cell;
color: $mega03-navigation_text_color;
&:hover {
background-color: $mega03-navigation_hover_bg_color;
> a {
color: $mega03-navigation_hover_text_color;
}
}
}
.js-level-01-trigger {
padding-right: 20px;
position: relative;
//三角部分
&::after {
position: absolute;
right: 7px;
top: 50%;
font-family: $font_family_awsm;
content: "\f105";
margin-top: 0;
color: $mega03-navigation_arrow2_color;
font-size: 20px;
transform: translateY(-50%);
}
&:hover::after {
color: $navigation_hover_text_color;
}
}
.js-level-01-cont,
.js-level-02-cont {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
}
.js-level-02,
.js-level-02-trigger,
.js-level-03 {
display: block;
color: $mega03-navigation_text2_color;
background: $mega03-navigation_bg2_color;
&:hover {
color: $navigation_hover_text2_color;
background-color: $navigation_hover_bg2_color;
}
}
.js-level-02-trigger {
position: relative;
&::after {
position: absolute;
right: 7px;
top: 50%;
font-family: $font_family_awsm;
content: "\f105";
margin-top: 0;
color: $mega03-navigation_arrow2_color;
font-size: 20px;
transform: translateY(-50%);
}
&:hover::after {
color: $mega03-navigation_hover_text_color;
}
}
}
}
}
}
}
}
}
}
}
}
/*----- メガメニュー（2段・プルダウンあり） END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2024-01-11更新（v1.0.0）
/*-- メガメニュー（2段・プルダウンあり） 編集画面用 START --*/
@include edit-page {
//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: block !important;
border: 1px solid #f00;
&::before {
content: "メガメニュー格納セクション";
position: absolute;
color: #fff;
background: #f00;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
.theme-fo-base .wrapper .contents {
:is(section, section[data-designpart-id]:not(:root):not(:root):not(:root):not(:root)) {
&.mega03Menu_custom_sec {
padding: 20px 0 !important;
.inner {
max-width: 1100px !important;
padding: 0 20px !important;
.row {
&.navigation-cont_row {
.col {
&.logo_col {
width: 20% !important;
}
&.cont_col {
width: 80% !important;
}
}
}
}
}
&.fixed {
position: relative;
top: initial;
border: 1px solid blue;
&::before {
content: "メガメニュー上部固定中（クラス名：fixed） ※固定を外したい場合はこのクラスを外す。";
position: absolute;
color: #fff;
background: blue;
padding: 0 5px;
right: 0;
top: -24px;
}
}
}
&.mega03Menu_down_list_sec {
max-width: 100%;
max-height: initial;
overflow-y: initial;
position: relative;
top: initial;
left: initial;
.inner {
max-width: 1100px !important;
.row {
// メガメニューでドロップダウンメニューがついているリンクかどうか判定するためのrow
&.js-downMenu_reference_row {
border: 1px solid red;
background: #000;
&::before {
content: "ナビゲーションのメニュー名と同じものを入れてください。（どのメニューに対応するか判定用。公開画面では非表示のrowになります。）";
position: absolute;
color: #fff;
background: red;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
.col {
padding: 10px 20px;
.component {
color: #fff;
&.heading {
:is(h2, h3) {
margin: 0;
}
}
}
}
}
}
}
}
&.js-megamenu_pullList_sec {
.inner {
padding: 20px;
.row {
&.sub_menu_list_row {
.col {
.component {
&.richtext {
&.menu_lists {
margin: 10px 0;
ul {
display: block;
margin-left: 40px;
li {
display: list-item;
padding: 5px;
a {
display: block;
color: inherit;
padding: 0;
margin: 0;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*-- メガメニュー（2段・プルダウンあり） 編集画面用 END --*/
メガメニューを一時的に格納するセクション（消さないでください）
© Basic Inc. All Rights Reserved.