【クリエイターモード】テンプレートShiroのヘッダーで子カテゴリーを折りたたんで表示させる方法はありますか。 – makeshop よくある質問

HTMLとCSSの追記をおこなうことで、PC、スマホの両方に表示可能です。

表示例）

（１）2階層目のカテゴリーのHTMLを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「ヘッダー」　モジュールID：$module.header

欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

<ul class="menu-category-wrap">

をコピー＆ペーストし、Enterキーを押して以下のソースを探してください。

<ul class="menu-category-wrap">
    <{section name=i loop=$category_menu.list}>
        <li class="menu-category-item"> <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a> </li>
    <{/section}>
</ul>

このソース部分を削除し、下記に変更してください。

<ul class="menu-category-wrap">
    <{section name=i loop=$category_menu.list}>
        <li class="menu-category-item">
        <!-- 子カテゴリーがある場合 -->
            <{if $category_menu.list[i].child_category.has_item}>
            <details>
            <summary>
            <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
            </summary>
            <ul class="nav-child-category nav-category-list">
                <{section name=j loop=$category_menu.list[i].child_category.list}>
                  <li class="nav-category-item">
                  <a href="<{$category_menu.list[i].child_category.list[j].url}>">
                  <{$category_menu.list[i].child_category.list[j].name}>
                  </a>
                  </li>
                <{/section}>
            </ul>
            </details>
            <{else}>
            <!-- 子カテゴリーがない場合 -->
            <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
            <{/if}>
        </li>
    <{/section}>
</ul>

（２）表示調節用のCSSを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ぺージ共通
「CSS」欄の末尾に以下をコピー＆ペーストし保存してください。

header details summary {
  display: list-item;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
header details summary a {
  text-decoration: none;
  color: inherit;
  margin-left: 1em;
  display: inline-block;
}
header details summary::marker {
  content: &#9654;
  color: #5d737e;
  font-size: 20px;
}
header details[open] summary::marker {
  content: &#9660;
}
header .cp_menu_leftnav ul.menu-category-wrap {
  margin-left: 10px;
}
header .menu-category-item > a {
  display: inline-block;
  margin-left: 1.5em;
}
header details summary a {
  margin-left: 0;
}

■makeshopサポート
クリエイターモード"カテゴリーツリー"を3～5階層目まで表示したい
https://www.support.makeshop.jp/design/?p=17319

関連リンク：
折りたたまずに子カテゴリーを表示させたままにしたい場合は、
下記のよくある質問をご参照ください。
【クリエイターモード】テンプレートShiroでヘッダーのカテゴリーに2階層目のカテゴリーを表示させることはできますか。

関連記事