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

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

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

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

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

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

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

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

テンプレートの編集は

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

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

html・jsの編集・追記

共通ファイルのhtmlに、

<nav>
 <div id="nav">
  <{section name=num loop=$category}>
   <{if $smarty.section.num.first }>
    <ul>
   <{/if}>
    <li><{$category[num].name}></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')
  }, false );
}
</script>

cssの追記

css編集欄に以下を貼り付け。SEO Plusテンプレート初期状態の方なら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);
}