多くの選択肢をモーダルメニューに入れるとメニューが縦長になりすぎてしまうのでアコーディオン化して閉じておく処理
例は、ブランド一覧
html
<?php /* gn ブランド一覧ここから---------------------------------------------------------- */ ?> <div class="gnBrandList"> <button class="gnBrandBtn">BRAND LIST</button> <ul class="gnBrandMenu"> <li><a href="<?php echo home_url(); ?>/items_cat/cafering" title="CAFERING">CAFERING</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/cafering_k" title="CAFERING K">CAFERING K</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/hoshinosuna" title="HOSHInoSUNA">HOSHInoSUNA 星の砂</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/belethe" title="BELETHE">BELETHE</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/k_uno" title="disney-treasure">K.UNO "Disney Treasure"</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/sakura_diamond" title="さくらダイヤモンド">さくらダイヤモンド</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/fika" title="fika">fika</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/lapage" title="LAPAGE">LAPAGE</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/nina_ricci" title="NINA RICCI">NINA RICCI</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/private_beach" title="ハワイアンジュエリー「プライベートビーチ」">private beach</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/lor" title="L'or">L'or</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/ptau" title="ptau">ptau</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/truelove" title="True Love">True Love</a></li> <li><a href="<?php echo home_url(); ?>/items_cat/fujita_original_selection" title="Fujita Original Selection">Fujita Original Selection</a></li> </ul> </div><!--/.gnBrandList--> <?php /* gn ブランド一覧ここまで---------------------------------------------------------- */ ?>
css
/* ▼アコーディオン --------------------*/
.gnBrandList {
width: 100%;
margin-bottom: 20px;
}
/* 初期状態は閉じる */
.gnBrandMenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 0;
margin: 0;
}
.gnBrandMenu li {
list-style: none;
}
.gnBrandMenu li a {
display: block;
padding: 8px 10px;
border-bottom: 1px solid #ddd;
text-decoration: none;
color: #333;
}
.gnBrandBtn {
width: 100%;
padding: 10px;
background: #937a6b;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
position: relative;
}
/* ▼ の矢印を疑似要素で作る */
.gnBrandBtn::after {
content: "▼";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}
/* 開いた時に矢印を回転 */
.gnBrandBtn.active::after {
transform: translateY(-50%) rotate(180deg);
}
/* アコーディオン本体 */
.gnBrandMenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s ease;
padding-left: 0;
margin: 0;
}
javascript
// アコーディオン
document.querySelector('.gnBrandBtn').addEventListener('click', function() {
const menu = document.querySelector('.gnBrandMenu');
if (menu.classList.contains('open')) {
// 閉じるとき
menu.style.maxHeight = null;
} else {
// 開くとき：中身の高さを自動で取得
menu.style.maxHeight = menu.scrollHeight + "px";
}
menu.classList.toggle('open');
this.classList.toggle('active'); // ← 矢印回転
});
※【重要】モーダルメニューを閉じるときにアコーディオンを閉じた状態にしたいのでモーダルメニュー開閉のjavascriptに「モーダル閉じたらアコーディオンも閉じる」を組み込んだコードにする必要がある。
こちらが組み込んだモーダルのjs
// 新スマホ グローバルメニュー -------------------------------------------------
var trigger = document.querySelector('.globalMenu');
var closeButtons = document.querySelectorAll('.closeButton');
var body = document.body;
var modal = document.getElementById('globalNavArea');
let scrollPosition = 0;
// ★ アコーディオンを閉じる処理（チラつき防止付き）
function resetAccordion() {
const menu = document.querySelector('.gnBrandMenu');
const btn = document.querySelector('.gnBrandBtn');
if (!menu || !btn) return;
// ★ transition を一時的に無効化（チラつき防止）
menu.style.transition = 'none';
// アコーディオンを閉じる
menu.classList.remove('open');
btn.classList.remove('active');
menu.style.maxHeight = null;
// ★ 次のフレームで transition を元に戻す
requestAnimationFrame(() => {
menu.style.transition = '';
});
}
// モーダルを閉じる処理
function closeModal() {
trigger.classList.remove('is-active');
body.classList.remove('is-nav-opened');
body.classList.add('is-nav-close');
body.style.top = '';
window.scrollTo(0, scrollPosition);
// ★ モーダルを閉じたらアコーディオンも閉じる
resetAccordion();
}
// モーダルを開く処理
function openModal() {
scrollPosition = window.scrollY;
trigger.classList.add('is-active');
if (body.classList.contains('is-nav-close')) {
body.classList.remove('is-nav-close');
}
body.classList.add('is-nav-opened');
body.style.top = `-${scrollPosition}px`;
modal.scrollTop = 0;
}
// トリガークリック
trigger.addEventListener('click', function () {
if (body.classList.contains('is-nav-opened')) {
closeModal();
} else {
openModal();
}
});
// closeButton クリックでも閉じる
closeButtons.forEach(btn => {
btn.addEventListener('click', closeModal);
});