SP時ナビゲーションの要素を
ハンバーガーメニュー内に移動
| 適用可能 パーツ |
変更可能 | 変更NG | 同一ページ に複数設置 |
ページ複製・クリップボード使用可否 |
|---|---|---|---|---|
etc... |
|
|
|
- ※共通ナビなので |
| ※留意事項 | ||||
|
※1：ロゴ画像はクラスが付与できないため、適用できません。
※3：一方はナビより上に移動、一方はナビより下に移動とすることも可能です。 |
||||
デモ
SPモードにして右２つのボタンの挙動をご参照ください。
ハンバーガーメニューを開くと、移動した要素が確認できます。
構造図
デモのパーツの構造を説明しています。
補足：クラス「sp_move02」を付与した場合はナビリストの上に移動します。
設定方法
-
CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを共通フッターの一番下に配置。
-
クラス名を見本とあわせる。
- ナビゲーション内で、SP時にハンバーガメニュー内に移動したいパーツにクラスを追加。
- ナビゲーションの上に移動する場合：該当パーツにクラス「sp_move02」付与。
- ナビゲーションの下に移動する場合：該当パーツにクラス「sp_move」付与。
- 移動後の要素にCSS調整をしたい場合、移動後に付与されるクラス「is-moved」に紐付けてスタイルを書くようにしてください。（カスタムCSS参照）
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>
2023-09-04更新（v1.0.0）
<script>
/* ----------------------------------------------
SP時ナビゲーションの要素をハンバーガーメニュー内に移動 v1.0.0
---------------------------------------------- */
jQuery(function () {
function spMoveButton() {
/* 画面幅が769px以下のときの処理(SP) */
if (window.matchMedia('(max-width: 769px)').matches) {
if (!jQuery('.main-menu .sp_move').length || !jQuery('.main-menu .sp_move02').length) {
/* 「.sp_move」があれば、SP時ナビゲーションの要素をハンバーガーメニュー内の【下】に移動する */
jQuery('.sp_move').clone().appendTo('.main-menu ul.clearfix');
/* 「.sp_move02」があれば、SP時ナビゲーションの要素をハンバーガーメニュー内の【上】に移動する */
jQuery('.sp_move02').clone().prependTo('.main-menu ul.clearfix');
/* 「.sp_move」または「.sp_move02」が「.main-menu」内に存在していれば「.main-menu」に専用クラス付与 */
if (jQuery('.main-menu .sp_move').length || jQuery('.main-menu .sp_move02').length) {
jQuery('.main-menu').addClass('is-moved');
} else {
jQuery('.main-menu').removeClass('is-moved');
}
}
}
};
/*--- ウィンドウのリサイズ完了後の処理 ---*/
const windowResize = () => {
let timer = 0;
let delay = 200;
window.addEventListener(
'resize',
() => {
clearTimeout(timer);
timer = setTimeout(() => {
spMoveButton();
spMoveButton02();
}, delay);
},
false
);
};
windowResize();
spMoveButton();
});
/* ----------------------------------------------
SP時ナビゲーションの要素をハンバーガーメニュー内に移動 END
---------------------------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
※新旧どちらにも対応できるようにデフォルトでは固定値で設定しているため、必要に応じて変数を設定してください。
2023-09-04更新（v1.0.0）
/*----- SP時ナビゲーションの要素をハンバーガーメニュー内に移動 START v1.0.0-----*/
.navigation-cont {
:is(
.sp_move,
.sp_move02
) {
@include breakpoint-sp {
display: none !important;// 移動前の要素をSP時に削除
}
}
}
// ハンバーガー内に移動後の要素のスタイル記述
.main-menu {
&.is-moved {
@include breakpoint-sp {
ul.clearfix {
:is(
.sp_move,
.sp_move02
) {
&.button {
margin: 15px 0;
& + .button {
}
.button-cont {
text-align: center;
}
}
}
}
}
}
}
/*----- SP時ナビゲーションの要素をハンバーガーメニュー内に移動 END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-08-25更新（v1.0.0）
/*----- SP時ナビゲーションの要素をハンバーガーメニュー内に移動 編集画面用 START v1.0.0-----*/
:is(
.sp_move,
.sp_move02
) {
border: 1px solid blue;
position: relative;
&::before {
content: "SP時ハンバーガー内へ移動";
color: #fff;
background: blue;
font-size: 13px;
position: absolute;
right: 0;
top: -19px;
padding: 2px 5px;
}
}
/*----- SP時ナビゲーションの要素をハンバーガーメニュー内に移動 編集画面用 END -----*/
© Basic Inc. All Rights Reserved.