＊この記事は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);
}
