大カテゴリークリックで小カテゴリーが出てくるナビゲーション

*この記事はカラーミーSEO+テンプレートに則したカスタマイズ内容となっていますが、
他テンプレートをご利用の場合でも応用することが出来ます(id・class名はご利用のテンプレートに合わせて調整してください)。
html・css・javascriptを編集するカスタマイズですので、予め現データのバックアップをとり、自己責任で行ってください。

なお、当記事の内容は次回のアップデート(2020年6月6日予定)でカラーミーSEO+テンプレートに実装予定です。

これまでPC用のグローバルナビには大カテゴリーのみを表示させ、カテゴリーページから小カテゴリーへの絞り込みが出来るようになっていましたが、グローバルナビから直接小カテゴリーに誘導できるようにします。

global-navのスクリーンショット

動作デモ(*注) → DEMOサイトにPCからアクセス

*注:最終的に少し違う動きに変えたので、この記事で紹介する内容とは若干異なります。

最終的にどうするか決めかねているのですが、今記事では
小カテゴリーがある場合、大カテゴリーをクリックすると小カテゴリーが表示される(大カテゴリーのリンクは動作しない)」というカスタマイズになります。

グローバルナビに小カテゴリーを表示させる

下のhtml・css・jsをそれぞれコピー&ペーストでご利用ください。
くどいですが、他テンプレートにそのまま貼り付けても上手く動かないと思うので、適宜調整してください。

テンプレートの編集は

カラーミー管理画面 > ショップ作成 > デザイン > デザイン : テンプレートの編集

から。
編集するファイルは全て「1・共通」です。

html・jsの編集・追記

共通ファイルのhtmlに、

<nav>
<div id="nav">
<{section name=num loop=$category}>
<{if $smarty.section.num.first }>

<ul >
<{/if}>
<li 〜><{$category[num].name}></a>
</li>
<{if $smarty.section.num.last }>

</ul>
<{/if}>
<{/section}>

</div>
</nav>

という箇所がありますので、sectionタグに囲まれた部分からulタグ以外(斜体部分)を全て削除。

削除するとこうなります。

<nav>
<div id="nav">
<ul >
</ul>
</div>
</nav>

<ul 〜>と</ul>の間に以下を貼り付け。

<{foreach from=$category item=big_cate name=key}>
<{if $subcategory[$big_cate.bid] != “"}>
<li><a class="gnav_open"><{$big_cate.name}></a>
<ul class="nav_hidden">
<{foreach from=$subcategory[$big_cate.bid] item=sub_cate name=key}>
<li><a href="<{$sub_cate.link_url}>"><{$sub_cate.name}></a></li>
<{/foreach}>
</ul>
</li>
<{else}>
<li><a href="<{$big_cate.link_url}>"><{$big_cate.name}></a></li>
<{/if}>
<{/foreach}>

そのまま、htmlの一番下に以下をそのまま貼り付け。

<script>
const sample = document.getElementsByClassName('gnav_open’);
for( let i=0;i < sample.length; i++){
sample[i].addEventListener('click’ , () => {
sample[i].classList.toggle('clicked’)
}
);
}
</script>

cssの追記

css編集欄に以下を貼り付け。SEO+テンプレート初期状態の方ならCSSは真っ白だと思いますが、そのまま貼り付けていただければ大丈夫です。

#nav li ul li {
width: 100%;
}
#nav ul.nav_hidden {
width: max-content;
position: absolute;
transform: rotateX(-90deg) perspective(1000px);
transform-style: preserve-3d;
transform-origin: top;
z-index:1;
}
#nav .gnav_open.clicked + ul.nav_hidden {
transform: rotateX(0);
}