追加可能 |
変更可能箇所 | NG | 同一ページ に複数設置 |
ページ複製・クリップボード使用可否 |
|---|---|---|---|---|
|
■ナビ部分
|
JS変更箇所
|
■メニューに追加NG
（▼自動吐き出しパーツ）※4
|
× | ◯ ※6 |
| 留意事項 | |||
|---|---|---|---|
|
○構造・仕様上の制約
○使用可否のパーツ
○更新・運用時の注意
○編集時のルール
○表示崩れ・不安定挙動に関する注意
|
設定方法
- CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
①メガメニューを表示させたいページでの設定
-
ページ一覧にて、[メガメニューを表示させたいページ]を作成。
-
編集画面内の設定から、「ナビゲーションを表示する」のチェックを外す。
-
JavaScriptをフッター等に入れる。（※②メガメニュー編集用ページでの設定の3の手順が終わってから）
-
格納用の空セクションを用意し、クラス名「js-megaMenu_contents_sec」を追加。フッター前などに配置する。
※このセクションがないとメガメニューが反映されません。
②-1メガメニュー編集用ページでの設定
-
[メガメニューを表示するページ]の下の階層に、[メガメニュー編集用ページ]を新規作成。
-
[メガメニュー編集用ページ]の共通エリア設定で、「共通ヘッダーを使用」をOFFにする。
-
[サイト内検索の検索結果から除外する]と[NOINDEX]にチェックを入れる。
- 任意のURLを設定。
例：mega-menu04-parts - コピーしたJavaScript内の、【const megaMenuPartsPath = '/js/mega-menu04-parts';】の'URL部分'を上記で設定したURLに変更する。
例：URLがmega-menu-partsの場合 →【const megaMenuPartsPath = '/mega-menu-parts';】 -
[メガメニュー編集用ページ]の編集画面に入り、
「ヘッダー・フッター・パンくずリストの表示」をONにする。
※検索結果画面で表示されるレイアウトは[メガメニュー編集用ページ]のレイアウト設定に依存します。 -
フッターにメガメニュー用のJSパーツが埋め込んであることを確認。
-
ヘッダー（メインビジュアル部分）を格納用セクションにするため、ヘッダーにクラス名「js-megaMenu_contents_sec」を追加。
- セクションを新規作成し、
クラス名「js-megaMenu_custom_sec megaMenu04_custom_sec fixed」を追加。
※ナビを固定したくない場合、クラス「fixed」は削除してください。 - 上記セクション内で行（row）を新規作成し、クラス名「navigation-cont_row」を追加。
- 上記行（row）を2分割する。
左のカラム（col）にクラス名「logo_col」を追加。
右のカラム（col）にクラス名「cont_col」を追加。
※ロゴ画像「logo_img（デフォルトで準備）」やボタンは必要があれば追加。※別ページから読み込んでいるために一部デザインパーツのCSSが効かないので、デフォルトパーツのみ使用。
- 上記「cont_col」内にリンクリストを配置し、クラス名「nav_menu_list」を追加。
→第2階層のリンクを設定。 - 上記セクションのすぐ下に新規セクションを作成し、
クラス名「js-megaMenu_down_list_sec megaMenu04_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 mega04Menu_down_list_sec」の他に「js-megamenu04_pullList_sec」を追加。
- その中の行（row）にクラス名「pullList_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が生成されていない可能性があります。（詳しくは設定方法をご覧ください）
メガメニューを一時的に格納するセクション（消さないでください）
JS・CSS・編集画面用CSS
- 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-11更新（v1.0.0）
<script>
/* ---------------------------
メガメニュー（1段・プルダウンあり） 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
---------------------------------*/
/* 設定：PC時の開閉方式（true=ホバー、false=クリック） */
const MEGA_PC_OPEN_BY_HOVER = true;
/* メガメニューのパーツを配置しているURLのパスを指定する (先頭に「/」を入れてください) */
const megaMenuPartsPath = '/js/mega-menu04-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');
/* プルダウンリスト用メガダウンメニュー */
const megaDownMenuSec02 = jQuery('.js-megamenu04_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}`);
downMenu.attr('data-mega-id', `${id}`);
}
});
});
/* トグルクリック処理 */
jQuery('.main-megaMenu').on('click', '.toggle_icon', function(e) {
e.preventDefault();
const toggle = jQuery(this);
const li = toggle.closest('li');
const childUl = li.children('ul').first();
/* トグルの開閉 */
if (childUl.length) {
childUl.slideToggle(200);
li.toggleClass('is-open');
}
});
/* 判定用に使用したテキストを削除 */
jQuery('.js-downMenu_reference_row').css('display', 'none');
/* ダウンメニューのリンクのみを取得 */
const downMenuLink = jQuery('.js-megaMenu_custom_sec .nav_menu_list .downMenu');
/* PC時の開閉方式を切り替え */
if (MEGA_PC_OPEN_BY_HOVER) {
downMenuLink.hover(
function() {
const $li = jQuery(this);
const id = $li.attr('data-mega-target');
$li.addClass('is-opened');
jQuery(`.js-megaMenu_down_list_sec[data-mega-id="${id}"]`).css('display', '');
},
function() {
const $li = jQuery(this);
const id = $li.attr('data-mega-target');
jQuery(`.js-megaMenu_down_list_sec[data-mega-id="${id}"]`).css('display', 'none');
$li.removeClass('is-opened');
}
);
} else {
jQuery(document)
.off('click.mm-open', '.js-megaMenu_custom_sec .downMenu > a')
.on('click.mm-open', '.js-megaMenu_custom_sec .downMenu > a', function(e) {
e.preventDefault();
if (windowPCorSP() === 'pc') {
const li = jQuery(this).parent('.downMenu');
const targetId = li.attr('data-mega-target');
const downMenu = jQuery(
`.js-megaMenu_down_list_sec[data-mega-id="${targetId}"]`
);
const isOpened = li.hasClass('is-opened');
jQuery('.js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.downMenu').removeClass('is-opened');
if (!isOpened) {
downMenu.css('display', '');
li.addClass('is-opened');
}
}
});
/* ヘッダー内クリックでのクローズ判定（クリックした箇所以外をクリックしたら閉じる） */
jQuery(document)
.off('mousedown.mm-header')
.on('mousedown.mm-header', function(e) {
if (windowPCorSP() !== 'pc' || MEGA_PC_OPEN_BY_HOVER) return;
const $t = jQuery(e.target);
const insideHeader = $t.closest('.js-megaMenu_custom_sec').length > 0;
const onTrigger = $t.closest(
'.js-megaMenu_custom_sec .nav_menu_list .downMenu > a'
).length > 0;
const insidePanel = $t.closest(
'.js-megaMenu_custom_sec .js-megaMenu_down_list_sec'
).length > 0;
if (insideHeader && !onTrigger && !insidePanel) {
jQuery('.js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.downMenu').removeClass('is-opened');
}
});
}
/* メガメニュー外クリックで閉じる（PC時のみ） */
jQuery(document)
.off('mousedown.mm-outside')
.on('mousedown.mm-outside', function(e) {
if (windowPCorSP() !== 'pc') return;
const $t = jQuery(e.target);
const insideMega =
$t.closest('.js-megaMenu_custom_sec').length > 0 ||
$t.closest('.js-megaMenu_down_list_sec').length > 0;
if (!insideMega) {
jQuery('.js-megaMenu_down_list_sec').css('display', 'none');
jQuery('.downMenu').removeClass('is-opened');
}
});
/*---------------------------------
プルダウン用リスト（js-menu_lists）のPC処理 START
---------------------------------*/
function pcMegaPullDownSetUp() {
/* js-megamenu04_pullList_sec を持つ downMenu に position: relative を追加 */
megaDownMenuSec02.closest('.downMenu').css('position', 'relative');
/* メインメニュー（プルダウン用リスト） */
const level_01 = jQuery('.js-menu_lists > div > ul > li');
const level_02 = jQuery('.js-menu_lists > div > ul > li > ul > li');
const level_03 = jQuery('.js-menu_lists > div > ul > li > ul > li > ul > li');
if (!level_01.length) {
return;
}
/* 1階層目 */
level_01.each(function() {
jQuery(this).addClass('js-level-01');
});
/* 2階層目 */
level_02.each(function() {
jQuery(this).addClass('js-level-02');
});
/* 3階層目 */
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();
});
/* トリガー用イベント（PCのみ） */
const $scope = megaMenuSec; /* .js-megaMenu_custom_sec */
function setupPullTriggerEvents(triggerSelector, targetSelector) {
if (windowPCorSP() === 'pc') {
$scope
.find(triggerSelector)
.off('mouseenter.mm-pull mouseleave.mm-pull')
.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階層目トリガー */
setupPullTriggerEvents('.js-level-01-trigger', '.js-level-01-cont');
/* 2階層目トリガー */
setupPullTriggerEvents('.js-level-02-trigger', '.js-level-02-cont');
}
if (windowPCorSP() === 'pc') {
pcMegaPullDownSetUp();
}
/*------------- プルダウン用リスト（js-menu_lists）のPC処理 END -------------*/
/*------------- メガメニュー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() {
function getStructureKey(ul) {
const items = [];
ul.find('> li').each(function() {
const li = jQuery(this);
const anchor = li.find('> p > a, > a, a').first();
const linkText = anchor.text().trim();
const href = anchor.attr('href') || '';
const childUl = li.children('ul');
let childKey = '';
if (childUl.length) {
childKey = getStructureKey(childUl);
}
items.push(
`${linkText}::${href}${childKey ? ` (${childKey})` : ''}`
);
});
return items.join('|');
}
/* ハンバーガメニューを挿入＆削除 */
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.each(function() {
const parentLi = jQuery(this).parent('li');
const newText = parentLi.text().trim();
const newDataTarget = parentLi.attr('data-mega-target');
const exists = jQuery('.main-megaMenu > ul > li')
.filter(function() {
const existingText = jQuery(this).text().trim();
const existingDataTarget = jQuery(this).attr('data-mega-target');
return (
existingText === newText &&
existingDataTarget === newDataTarget
);
}).length > 0;
if (!exists) {
const clonedLi = parentLi.clone(true, true);
clonedLi.appendTo('.main-megaMenu > ul');
}
});
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));
}
const addedStructureKeys = new Set();
section
.find('.component.richtext, .component.list')
.each(function(groupIndex) {
const comp = jQuery(this);
const ul = comp.find('ul').first();
if (!ul.length) return;
const groupID = `${id}-${groupIndex}`;
const structureKey = getStructureKey(ul);
if (!addedStructureKeys.has(structureKey)) {
const clonedUl = ul.clone(true, true);
clonedUl.attr('data-group-id', groupID);
clonedUl.appendTo(jQuery(element01));
addedStructureKeys.add(structureKey);
}
});
section.remove();
});
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">');
});
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');
/* トグルアイコンを追加 */
jQuery('.main-megaMenu li').each(function() {
const li = jQuery(this);
const childUl = li.children('ul');
if (childUl.length) {
let anchor = li.children('a, p > a, strong > a').first();
if (!anchor.length) {
anchor = li.find('a').first();
}
if (anchor.length && anchor.find('.toggle_icon').length === 0) {
anchor.append('<span class="toggle_icon"></span>');
}
}
});
jQuery('.main-megaMenu .downMenu > a').each(function() {
if (jQuery(this).find('.toggle_icon').length === 0) {
jQuery(this).append('<span class="toggle_icon"></span>');
}
});
/* ハンバーガーメニューにクリックイベントを付与 */
megaMenuTrigger.on('click', function() {
megaMenuTrigger.toggleClass('is-active');
mainMegaMenu.toggleClass('is-active');
mainMegaMenu.toggle();
jQuery('html').toggleClass('is-locked');
megaMenuSec.toggleClass('is-open');
});
/* トグル初期化用：すべて非表示にする */
jQuery('.main-megaMenu li ul').css('display', 'none');
});
} 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');
}
}
/*------------- メガメニューSP時 END -------------*/
/*--- ウィンドウのリサイズ完了後の処理 ---*/
const windowResize = () => {
let timer = 0;
let delay = 100;
window.addEventListener(
'resize',
() => {
clearTimeout(timer);
timer = setTimeout(() => {
spMegaMenuSetUp();
}, delay);
},
false
);
};
spMegaMenuSetUp();
windowResize();
});
/*------------- メガメニューを別ページから読み込んで初期機能設定 END -------------*/
});
/* SPメニューのトグル処理（再定義） */
jQuery(document)
.off('click', '.main-megaMenu .toggle_icon')
.on('click', '.main-megaMenu .toggle_icon', function(e) {
e.preventDefault();
const li = jQuery(this).closest('li');
const targetUl = li.children('ul');
if (targetUl.length) {
targetUl.stop(true, true).slideToggle(200);
li.toggleClass('is-open');
jQuery(this).toggleClass('is-open');
}
});
/*--- ページ内遷移ずれる対策 ---*/
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 ---*/
/* ---------------------------
メガメニュー（1段・プルダウンあり） END
--------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
※新旧どちらにも対応できるようにデフォルトでは固定値で設定しているため、必要に応じて変数を設定してください。
2025-12-11更新（v1.0.0）
/*----- メガメニュー（1段・プルダウンあり） START v1.0.0 -----*/
/* --------------------------------
variables（変数）
----------------------------------- */
$mega04-navigation_bg_color: #fff; //メガメニューの背景色
$mega04-navigation_font_size: 14px; //メガメニューのフォントサイズ（1〜3階層）
$mega04-navigation_font_weight: bold; //メガメニューのフォントの太さ（1〜3階層） normal or bold
$mega04-navigation_hover_opacity: 1; //メガメニューをホバーした時の透視度
$mega04-navigation_bg2_color: #ffad2f; //メガメニューの背景色（2階層以下）
$mega04-navigation_hover_bg_color: #ffad2f; //メガメニューをホバーした時の背景色
$mega04-navigation_text_color: #2d2d2d; //メガメニューのテキストカラー
$mega04-navigation_hover_text_color: #ffad2f; //メガメニューをホバーした時のテキストカラー
$mega04-navigation_text2_color: #fff; //メガメニューのテキストカラー（2階層以下）
$mega04-navigation_arrow1_color: #2d2d2d; //矢印カラー（1階層）
$mega04-navigation_arrow2_color: $mega04-navigation_arrow1_color; //矢印カラー（2階層）
//メガメニュー（1段） ハンバーガーメニュー
$mega04-navigation_sp_font_size: 14px; //メガメニュー（SP）時のテキストサイズ（1〜3階層）
$mega04-navigation_sp_font_weight: bold; //メガメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$mega04-navigation_sp_text_color: $mega04-navigation_text2_color; //メガメニュー（SP）時のテキストカラー １階層
$mega04-navigation_sp_text2_color: $mega04-navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー（2階層）
$mega04-navigation_sp_text3_color: $mega04-navigation_sp_text_color; //メガメニュー（SP）時のテキストカラー（3階層）
$mega04-navigation_sp_hover_text_color: #ffad2f; //メガメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$mega04-navigation_sp_arrow1_color: $mega04-navigation_sp_text_color; //メガメニュー（SP） 矢印カラー（1階層）
$mega04-navigation_sp_arrow2_color: $mega04-navigation_sp_text2_color; //メガメニュー（SP） 矢印カラー（2階層）
$mega04-navigation_sp_bg_color: #fff; //メガメニュー（SP）時の背景色（1階層）
$mega04-navigation_sp_bg2_color: $mega04-navigation_bg_color; //メガメニュー（SP）時の背景色（２階層）
$mega04-navigation_sp_bg3_color: #eee; //メガメニュー（SP）時の背景色（3階層）
$mega04-navigation_sp_border-bottom: 1px dashed #ffad2f; //メガメニュー（SP）時のボーダー（hamburger_custom 使用時）
/*------------- 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: #ffad2f;
}
}
}
//初期読み込み時に格納セクションが一瞬見えてしまう（チラつき）防止
.js-megaMenu_contents_sec {
display: none !important;
}
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
//固定サイドバー対策
&.js-megaMenu_custom_sec {
&.has-fixed-side {
@media screen and (min-width: 1201px) {
width: calc(100% - 420px);
}
}
}
/*-- メガメニュー（1段） 共通設定 --*/
&:is(
.megaMenu04_custom_sec,
.megaMenu04_down_list_sec
) * {
box-sizing: border-box;
}
&:where(
.megaMenu04_custom_sec,
.megaMenu04_down_list_sec,
.js-megamenu04_pullList_sec
) {
width: 100%;
font-family: 'Noto Sans JP', sans-serif;//適宜変更
line-height: 1.5;//適宜変更
letter-spacing: .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;
}
}
}
}
}
}
}
}
}
&:where(
.megaMenu04_down_list_sec,
.js-megamenu04_pullList_sec) {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
/*-- メガメニュー（1段） 共通設定 END--*/
/*-- メガメニュー（1段） ナビ部分 --*/
&.megaMenu04_custom_sec {
background: $mega04-navigation_bg_color;
box-shadow: $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;
padding: 5px 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 {
@include breakpoint-pc {
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;
@include breakpoint-sp {
padding: 0 60px 0 0;
}
.component {
margin: 0;
&.list {
&.nav_menu_list {
height: 100%;
@include breakpoint-sp {
display: none !important;
}
> ul {
display: flex;
height: 100%;
> li {
display: block;
margin: 0;
padding: 0;
font-size: $mega04-navigation_font_size;
color: $mega04-navigation_text_color;
&:not(:has(.js-megamenu04_pullList_sec)) {
&.downMenu {
&.is-opened {
> a {
&::before {
content: '';
position: absolute;
left: calc(50% - 3px);
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #ffad2f transparent;
transform: translateX(-50%);
}
//-の場合
// &::after {
// content: "\f068";
// }
}
}
}
}
&.downMenu {
> a {
position: relative;
&::after {
content: "\f0d7";//＋の場合："\2b"
font-family: $font_family_awsm6;
margin-left: 5px;
font-size: 16px;
font-weight: 900;
line-height: 1;
color: $mega04-navigation_text_color;
}
}
}
> a {
display: flex;
align-items: center;
height: 100%;
padding: 20px 10px;
text-decoration: none;
font-weight: $mega04-navigation_font_weight;
line-height: 1.2;
color: $mega04-navigation_text_color;
&:hover {
color: $mega04-navigation_hover_text_color;
opacity: $mega04-navigation_hover_opacity;
&::before,
&::after {
color: $mega04-navigation_hover_text_color;
}
}
}
}
}
}
}
&.button {
margin-left: 10px;
@include breakpoint-sp {
margin: 0;
}
.button-cont {
a {
&:is(.size-s, .size-m, .size-l) {
@include breakpoint-msp {
min-width: initial;
background: none;
border: none;
border-radius: 0;
font-size: 0;
padding: 5px;
}
&::before {
@include breakpoint-msp {
font-size: 22px;
color: #ffad2f;
margin: 0;
}
}
}
}
}
}
}
}
}
}
}
// ハンバーガーメニュー
.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 .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);
}
}
}
}
// メインメガメニュー（1段） PC時 {
@include breakpoint-pc {
.main-megaMenu {
display: none;
}
}
// メインメガメニュー（1段） SP時
@include breakpoint-sp {
.main-megaMenu {
height: calc(100vh + 100px);
overflow: auto;
font-family: 'Noto Sans JP', sans-serif;//適宜変更
background: #ffad2f;
padding: 20px 0 250px;
ul {
li {
a {
display: block;
position: relative;
padding: 20px;
text-decoration: none;
font-size: $mega04-navigation_sp_font_size;
font-weight: $mega04-navigation_sp_font_weight;
line-height: 1.2;
color: $mega04-navigation_sp_text_color;
span {
font-weight: inherit;
}
}
/* 2階層目トリガー */
&.downMenu {
a {
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: $mega04-navigation_sp_arrow1_color;
}
&::before {
content: '';
width: 2px;
height: 18px;
transform: rotate(0);
-webkit-transform: rotate(0);
z-index: 1;
transition: all .5s ease;
}
&::after {
content: '';
position: relative;
right: 2px;
width: 2px;
height: 18px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: all .5s ease;
}
&.is-open {
&::before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
}
}
}
ul {
&.js-level-01-cont {
position: relative;
&:first-of-type {
&::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: calc(100% - 33px);
height: 0.1rem;
transform: translateX(-50%);
background: #fff;
}
}
}
&:first-of-type {
padding: 5px 0 0;
}
&:last-of-type {
padding: 0 0 5px;
}
.js-level-02 {
a {
padding: 15px 30px 15px calc(20px + 1em);
}
.js-level-03 {
a {
padding: 15px 30px 15px calc(20px + 2em);
}
.js-level-04 {
a {
padding: 15px 30px 15px calc(20px + 3em);
}
}
}
}
}
}
}
}
}
}
}
/*-- メガメニュー（1段） メニュー内 --*/
&.megaMenu04_down_list_sec {
background: $mega04-navigation_bg2_color;
color: $mega04-navigation_text2_color;
padding: 20px 0;
.inner {
padding: 20px;
.row {
// 以下、メニュー内のデザインに合わせて適宜変更（不要であれば削除）
&.sub_menu_list_row {
display: flex;
gap: 20px;
& + .sub_menu_list_row {
margin-top: 30px;
}
.col {
padding: 0;
.component {
&.richtext {
// メニュー内タイトル部分
&.sub_menu_title_text {
margin-bottom: 10px;
}
// [お知らせ]リスト
&.megaMenu_list01 {
ul {
display: flex;
flex-direction: column;
margin: 0;
li {
display: block;
margin: 0;
padding: 0;
font-size: 16px;
a {
display: block;
padding: 10px 0;
border-bottom: 1px solid #fff;
text-decoration: none;
color: #fff;
&:hover {
opacity: $hover_opacity;
}
}
ul {
margin: 0 0 0 10px !important;
li {
font-size: 14px;
a {
border: none;
}
}
}
}
}
/* 1階層目 */
> ul {
margin: 0;
> li {
& + li {
margin-top: 10px;
}
/* 2階層目 */
> ul {
padding: 5px 0;
}
}
}
}
}
&.list {
// [お知らせ]リスト
&.megaMenu_list02 {
ul {
display: flex;
flex-direction: column;
li {
display: block;
margin: 0;
padding: 0;
font-size: 16px;
a {
display: block;
padding: 10px 0;
text-decoration: none;
font-weight: bold;
color: #fff;
&:hover {
opacity: $hover_opacity;
background: none;
}
}
}
}
}
}
}
}
}
.col {
// ボックスリンク用
&.box_link_col {
position: relative;
&:hover {
opacity: $hover_opacity;
}
}
}
}
}
}
&.js-megamenu04_pullList_sec {
display: block;
max-width: none;
max-height: none;
width: 100%;
box-shadow: none;
overflow: initial;
padding: 0;
.inner {
padding: 0;
.row {
&.pullList_row {
.col {
.component {
&.richtext {
&.menu_lists {
margin: 0;
ul {
display: flex;
flex-direction: column;
align-items: stretch;
width: clamp(160px, calc(-90px + 56.25vw), 200px);
margin: 0;
li {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
background: $mega04-navigation_bg_color;
padding: 0;
margin: 0;
a {
display: block;
color: $mega04-navigation_text_color;
font-weight: $mega04-navigation_font_weight;
margin: 0;
padding: 20px;
&:hover {
opacity: 1;
}
}
}
.js-level-01,
.js-level-01-trigger {
display: table-cell;
color: $mega04-navigation_text_color;
&:hover {
background-color: $mega04-navigation_hover_bg_color;
> a {
color: $mega04-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: $mega04-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: $mega04-navigation_text2_color;
background: #fff;
&: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: $mega04-navigation_arrow2_color;
font-size: 20px;
transform: translateY(-50%);
}
&:hover::after {
color: #fff;
}
}
}
}
}
}
}
}
}
}
}
}
/*----- メガメニュー（1段・プルダウンあり） END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2024-01-11更新（v1.0.0）
/*-- メガメニュー（1段・プルダウンあり） 編集画面用 START v1.0.0--*/
@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)) {
&.megaMenu04_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;
}
}
}
&.megaMenu04_down_list_sec {
position: relative;
top: initial;
left: initial;
.inner {
.row {
// メガメニューでドロップダウンメニューがついているリンクかどうか判定するためのrow
&.js-downMenu_reference_row {
border: 1px solid red;
background: #000;
&::before {
content: "ナビゲーションのメニュー名と同じものを入れてください。（どのメニューに対応するか判定用。公開画面では非表示の行になります。）";
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-megamenu04_pullList_sec {
.inner {
padding: 20px;
.row {
&.pullList_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;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*-- メガメニュー（1段・プルダウンあり） 編集画面用 END --*/
© Basic Inc. All Rights Reserved.