カテゴリ一覧のようなポップアップメニュー表示を作成する [HTML5テンプレート用]

2018-06-21 14:40

カテゴリ一覧のようなポップアップメニューを自由記入欄やhtmlタグ利用可能エリアに設置できます。

STEP1　htmlタグをコピーする
表示サンプル： https://cafe0101.ocnk.net/
<div class="side_box category">
<div class="section_title">
<h2>タイトル</h2>
</div>

<ul class="side_contents category_list side_category_popup">

<!-- ↓メニューセット　※サブメニューあり↓ -->
<li class="parent_category">
<div class="parentcategory"><a class="parentcategory_link item_list_link" href="javascript:void(0);">サブメニューありメイン</a></div>
<div class="sub_category_box" style="visibility: hidden;">

<!-- ↓サブメニューセット↓ -->
<ul class="subcategories">
<li class="postop"><a class="item_list_link" href="https://demo.ocnk.net/">サブメニュー1</a></li>
<li><a class="item_list_link" href="https://demo.ocnk.net/">サブメニュー2</a></li>
<li class="posbottom"><a class="item_list_link posbottom" href="https://demo.ocnk.net/">サブメニュー3</a></li>
</ul>
<!-- ↑サブメニューセット↑ -->

</div>
</li>
<!-- ↑メニューセット　※サブメニューあり↑ -->

<!-- ↓メニューセット　※サブメニューなし↓ -->
<li class="parent_category">
<div class="maincategory"><a class="parentcategory_link item_list_link" href="https://demo.ocnk.net/">サブメニューなしメイン</a></div>
</li>
<!-- ↑メニューセット　※サブメニューなし↑ -->

</ul>

</div>

STEP2　htmlタグを貼り付ける

コピーしたhtmlタグを、[デザイン管理]→[配置/画像/コメント設定]から[自由記入欄]や[htmlタグ利用可能エリア]に貼り付けてください。

タイトルについて
「タイトル」はご自身で変更可能です。
<h2>タイトル</h2>
各メニューについて
<li class="parent_category">～</li>
上記が1つのメニューセットとなります。
メニューセットには、サブメニューあり/なしの2パターンがあり、メニューセットを繰り返し追加することでメニューを追加できます。
サブメニューあり
サブメニューありの場合、内部にサブメニューのセットが入ります。
<ul class="subcategories">～</ul>までがその部分となります。

サブメニューを追加する場合は、下記の1行を繰り返し追加してください。
<li><a class="item_list_link" href="https://demo.ocnk.net/">サブメニュー</a></li>
※liタグ内にpostopとposbottomの指定がありますが、postopは、一番上のliタグにposbottomは、一番下のliタグに指定してください。

各サブメニューのリンク先：下記のaタグのURL変更してください。
各サブメニューのメニュー名：文言を変更してください。
<a class="item_list_link" href="https://demo.ocnk.net/">サブメニュー</a>
※aタグ内にposbottomの指定がありますが、これは、一番下のaタグに指定してください。
<li class="parent_category">
<div class="parentcategory"><a class="parentcategory_link item_list_link" href="javascript:void(0);">サブメニューありメイン</a></div>
<div class="sub_category_box" style="visibility: hidden;">

<!-- ↓サブメニューセット↓ -->
<ul class="subcategories">
<li class="postop"><a class="item_list_link" href="https://demo.ocnk.net/">サブメニュー1</a></li>
<li><a class="item_list_link" href="https://demo.ocnk.net/">サブメニュー2</a></li>
<li class="posbottom"><a class="item_list_link posbottom" href="https://demo.ocnk.net/">サブメニュー3</a></li>
</ul>
<!-- ↑サブメニューセット↑ -->

</div>
</li>
サブメニューなし
各サブメニューのリンク先：下記のaタグのURL変更してください。
各サブメニューのメニュー名：文言を変更してください。
<li class="parent_category">
<div class="maincategory"><a class="parentcategory_link item_list_link" href="https://demo.ocnk.net/">サブメニューなしメイン</a></div>
</li>
独自ドメインをご利用の場合
SSL保護下のページ(新規登録、お問い合わせ、ログイン、マイページ、メールマガジン、携帯サイトアドレスページ)へのリンクをメニュー内に追加される場合は、下記のFAQをご覧ください。
https://www.ocnk.net/faq/index.php?action=faq&id=986