サイドメニュー開閉
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
×※1 |
JS変更箇所
|
× | 〇 |
| ※留意事項 | |||
|
※1：中に他のパーツを入れると崩れる可能性が高いので、テキスト・リンク編集、画像差し替えのみとしてください。 ※4：SP非表示にする場合、サイドメニューパーツの入った行（row）にクラス「pcOnly」を追加。（初期設定ではSP非表示） ※共通パーツで作成する場合、共通パーツ内はカスタムCSSが効かないため見た目が崩れているように見えますが、ページの編集画面または公開ページにて正しい表示が確認できますので編集の際はご注意ください。
【JS】 |
|||
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページある場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- 行（row）にクラス名「sidemenu_row js-sidemenu_row」を追加。
- 共通パーツで作成する場合、上記の行（row）内に共通パーツを新規作成する。※「共通パーツ名：サイドメニュー開閉」参照
- リッチテキストを配置し、クラス名「sidemenu_list_text」を追加。
- リッチテキストのリスト機能を使用し、①アイコン画像を配置→②テキスト挿入＆リンク設定する。
- SP時の表示・非表示のコントロールは、行（row）に対してクラス名「pcOnly」の付け外しで可能。
注意点
- 先にリンクを付けてしまうと画像が上手く入らないため、必ず画像を挿入してからテキストにリンクをつけてください。
- 画像サイズ：縦横比を揃えるようにお願いしてください。構造上、縦横比が異なる場合は見た目にバラつきが出ます。
- 共通パーツで作成する場合、共通パーツ内はカスタムCSSが効かないため見た目が崩れているように見えますが、ページの編集画面または公開ページにて正しい表示が確認できますので編集の際はご注意ください。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-29更新（v1.0.0）
<script>
/* --------------------
サイドメニュー開閉 v1.0.0
---------------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function() {
/*------------- 変数定義 【変更可能】 START -------------*/
const set_time = 1500;/* 開閉の秒数を変更可能（1秒 → 1000） */
/*------------- 変数定義 【変更可能】 END -------------*/
const sidemenu_list = document.querySelector('.js-sidemenu_row');/* サイドメニューを格納しているrow */
setTimeout(function() {
/* 1.5秒後にクラス付与し強制的に閉じる */
sidemenu_list.classList.add('is-close');
/* hover時にクラスつけ外しで開閉 */
sidemenu_list.addEventListener('mouseover', function() {
sidemenu_list.classList.remove('is-close');
});
sidemenu_list.addEventListener('mouseout', function() {
sidemenu_list.classList.add('is-close');
});
}, set_time);
});
/* --------------------
サイドメニュー開閉 END
---------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-27更新（v1.0.0）
/*----- サイドメニュー開閉 START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
&.sidemenu_row {
max-width: 240px;
position: fixed;
top: 305px;
right: 0;
z-index: 99;
transition: right .2s ease-out;
&.is-close {
right: -180px;
}
.col {
padding: 0;
.component {
&.richtext {
&.sidemenu_list_text {
margin: 0;
ul {
list-style-type: none;
margin: 0;
li {
display: flex;
align-items: center;
background: #ffad2f;
color: #fff;
position: relative;
padding: 10px;
&:hover {
opacity: 0.7;
}
img {
max-width: 40px !important;
}
a {
display: flex;
align-items: center;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
padding-left: 80px;
}
}
}
}
}
}
}
}
}
}
}
}
/*----- サイドメニュー開閉 END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2024-09-17更新（v1.0.0）
/*-- サイドメニュー開閉 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
&.sidemenu_row {
max-width: 500px;
margin: 20px auto;
position: relative;
top: initial;
right: initial;
z-index: initial;
transition: none;
.col {
.component {
&.richtext {
&.sidemenu_list_text {
ul {
li {
&:hover {
opacity: 1;
}
a {
position: relative;
top: initial;
left: initial;
padding-left: 20px;
}
}
}
}
}
}
}
}
}
}
}
/*-- サイドメニュー開閉 編集画面用 END --*/
© Basic Inc. All Rights Reserved.