【クリエイターモード】テンプレート【Wabisabi】で左メニューをツリー表示にすることはできますか。

テンプレート【Wabisabi】のPC表示で、左メニューのカテゴリーをツリー表示（親カテゴリーにマウスオーバーすると子カテゴリーが横に展開する形式）にデザインすることは可能です。

※編集の際は、必ずデザインセットのコピーボタンをクリックしてバックアップを保管されたうえで作業をおこなってください。

■makeshopサポート
ショップデザインバックアップしてますか？！

（１）CSSを追記する

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通　

「CSS」の末尾に、以下のコードをコピーして貼り付け、保存してください。

/* side category list */
.side-section {  padding: 16px 0 32px; margin-bottom: 32px; }
.side-title { margin: 0 auto 24px; padding: 8px 0; position: relative; width: 86%; background: #fff; border-top: ;}
.side-category-item { position: relative; }
.side-category-item a { text-align: left; padding: 12px; font-size: 0.9rem; display: block; }
.side-category-item a:hover { background: #eee; opacity: 1.0; }
.side-category-item::after { content: ""; display: block; width: 90%; height: 1px; background-color: #fff; position: absolute; bottom: -1px; left: 0; right: 0; margin: 0 auto; }
.side-category-item:hover .side-category-child-list { opacity: 1; visibility: visible; }
.side-category-child-list { position: absolute; right: -100px; top: -4px;  z-index: 10;    opacity: 0; visibility: hidden; background-color: #fff;border: solid 1px #ccc;}
.side-category-child-list a:hover { background: #eee; }
.side-category-switch.hover { background: #fff; }
.side-category-child-list li::after { background-color: #f0efe9; }

（２）HTMLを置き換える

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理 「サイドメニュー」　

モジュールID：「$module.side_bar」の以下の記述をすべて削除してください。

<{section name=i loop=$category_menu.list}>
    <dl class="left-nav-category">
    <dt class="left-nav-title"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></dt>
      <{if $category_menu.list[i].child_category.has_item}>
        <{section name=j loop=$category_menu.list[i].child_category.list}>
          <dd class="left-nav-item"><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></dd>
        <{/section}>
      <{/if}>
    </dl>
<{/section}>

削除した位置に、以下のHTMLをコピーして貼り付け、保存してください。

<section class="side-section side-section-category">
	<h2 class="left-nav-title">カテゴリーから選ぶ</h2>
		<ul class="side-category-list">
		<{section name=i loop=$category_menu.list}>
			<li class="side-category-item"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
				<{if $category_menu.list[i].child_category.has_item}>
					<ul class="side-category-child-list">
						<{section name=j loop=$category_menu.list[i].child_category.list}>
							<li><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></li>
						<{/section}>
					</ul>
				<{/if}>
			</li>
		<{/section}>
	</ul>
</section>