クリックでリンクリストの表示
言語切り替えボタン等を実装する際に使用
| 追加可能パーツ | 変更可能箇所 | 同一ページに 複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
× |
|
× | 〇 |
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
- 行（row）を新規作成し、クラス名「js-elementOpen-trigger」を追加。
- 上記の中にリッチテキストパーツとリンクリストパーツを1つずつ配置。
- リッチテキストパーツにクラス名「trigger_text」を追加。※トリガーとなるボタンになります
- リンクリストには、クリック後に表示されるものが入ります。用途に合わせてリンク設定をしてください。
- デザインに合わせてカスタムCSSは適宜変更してください。
注意点
- 共通パーツでは使用できません。
- 編集画面では操作性考慮するために、幅100%で表示しています。必要あれば適宜調整＆引き継ぎしてください。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-30更新（v1.0.0）
<script>
/* ----------------------------
クリックでリンクリストの表示 v1.0.0
---------------------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function() {
const trigger = document.querySelector(".js-elementOpen-trigger");
const className = "is-open";
/* 閉じる処理 */
function elementClose() {
/* 要素が表示されていたら非表示 */
if (trigger.classList.contains(className)) {
trigger.classList.remove(className);
}
}
/* トリガーをクリックした時の処理 */
trigger.addEventListener("click", function() {
trigger.classList.add(className);
});
/* トリガー以外をクリックした時の処理 */
document.addEventListener("click", function(e) {
if (!e.target.closest(".js-elementOpen-trigger")) {
elementClose();
}
});
/* ページ内リンクをクリックした時 */
document.querySelectorAll("a[href^='#']").forEach(function(link) {
link.addEventListener("click", function() {
elementClose();
});
});
});
/* ----------------------------
クリックでリンクリストの表示 END
---------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-26更新（v1.0.0）
/*----- クリックでリンクリストの表示 START v1.0.0-----*/
.row {
&.js-elementOpen-trigger {
position: fixed;
bottom: 70px;
right: 10px;
z-index: 1000;
width: max-content;
background: #ffad2f;
border-radius: 5px;
cursor: pointer;
&.is-open {
cursor: auto;
.col {
.component {
&.list {
width: auto;
height: auto;
opacity: 1;
pointer-events: auto;
transition: all .2s cubic-bezier(.02,.42,.24,.74);
}
}
}
}
.col {
padding: 10px;
.component {
&.richtext {
&.trigger_text {
margin: 0;
padding: 10px;
}
}
&.list {
width: 0;
height: 0;
opacity: 0;
margin: 0;
pointer-events: none;
transition: none;
ul {
li {
font-size: inherit;
a {
&:hover {
background: inherit;
}
}
}
}
}
}
}
}
}
/*----- クリックでリンクリストの表示 END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-03-27更新（v1.0.0）
/*-- クリックでリンクリストの表示 編集画面用 START v1.0.0--*/
.row {
&.js-elementOpen-trigger {
position: relative;
top: auto;
bottom: auto;
right: auto;
width: 100%;
margin-top: 30px;
.col {
.component {
&.list {
width: auto;
height: auto;
opacity: 1;
pointer-events: auto;
ul {
li {
a {
&:hover {
opacity: 1;
}
}
}
}
}
}
}
}
}
/*-- クリックでリンクリストの表示 編集画面用 END --*/
© Basic Inc. All Rights Reserved.