ヘッダーメニューを自由記入欄モードで利用する [HTML5テンプレート用]

2018-06-21 13:52

既存のヘッダーメニューのデザインやドロップダウンメニューを利用することができます。

STEP1 htmlタグをコピーする

ブラウザからhtmlソースをご覧の上、下記の箇所をコピーしてください。
<div class="clearfix" id="globalnavi" data-drilldown="off">から</div>までとなります。
下記は、https://cafe0101.ocnk.net/のヘッダーメニュー例です。

<div class="clearfix" id="globalnavi" data-drilldown="off">
<ul class="fix_center clearfix dropdown">
<li class="header_nav h_home nav_on posleft">
<a class="nav_link" style="min-height: 49px;" href="https://cafe0101.ocnk.net/"><span class="nav_box"><img width="45" height="45" alt="ホーム" src="https://cafe0101.ocnk.net/res/layout004/img/navi_home_bg.gif" data-x2="https://cafe0101.ocnk.net/res/layout004/img/navi_home_bg_x2.gif"></span></a>
</li>
<li class="header_nav h_category">
<div class="header_category">
<a class="nav_link" style="min-height: 49px;" href="javascript:void(0);"><span class="nav_box">商品カテゴリ一覧</span></a>
</div>
<ul class="sub_menu" style="visibility: hidden;">
<li class="all_items">
<div class="sub_menu_button">
<a class="item_list_link" href="https://cafe0101.ocnk.net/product-list">全商品</a>
</div>
</li>
<li>
<div class="sub_menu_button">
<a class="item_list_link" href="https://cafe0101.ocnk.net/product-list/1">トップス</a>
</div>
</li>
<li>
<div class="sub_menu_button">
<a class="item_list_link" href="https://cafe0101.ocnk.net/product-list/2">パンツ</a>
</div>
</li>
<li class="posbottom">
<div class="sub_menu_button">
<a class="item_list_link" href="https://cafe0101.ocnk.net/product-list/3">その他</a>
</div>
</li>
</ul>
</li>
<li class="header_nav h_group">
<div class="header_group">
<a class="nav_link" style="min-height: 49px;" href="javascript:void(0);"><span class="nav_box">特集</span></a>
</div>
<ul class="sub_menu">
<li class="posbottom">
<a class="item_list_link" href="https://cafe0101.ocnk.net/product-group/1">春夏コレクション</a>
</li>
</ul>
</li>
<li class="header_nav h_help">
<a class="nav_link" style="min-height: 49px;" href="https://cafe0101.ocnk.net/help"><span class="nav_box">ご利用案内</span></a>
</li>
<li class="header_nav h_legal">
<a class="nav_link" style="min-height: 49px;" href="https://cafe0101.ocnk.net/info"><span class="nav_box">特定商取引法表示</span></a>
</li>
<li class="header_nav h_news reversed_action">
<a class="nav_link" style="min-height: 49px;" href="https://cafe0101.ocnk.net/news"><span class="nav_box">What's New</span></a>
</li>
<li class="header_nav h_diary reversed_action">
<a class="nav_link" style="min-height: 49px;" href="https://cafe0101.ocnk.net/diary"><span class="nav_box">店長日記</span></a>
</li>
<li class="header_nav h_inquiry posright reversed_action">
<a class="nav_link secure_link" style="min-height: 49px;" href="https://cafe0101.ocnk.net/contact"><span class="nav_box">お問い合わせ</span></a>
</li>
</ul>
</div>

STEP2 htmlタグを貼り付ける

コピーしたhtmlタグを、[デザイン管理]→[配置/画像/コメント設定]画面から
ヘッダーメニューの[自由記入欄モード欄]に貼り付けて下さい。
既存のデザインで表示され、ホームアイコンやドロップダウンメニュー、メニューが溢れた場合の開閉表示も利用可能です。
自由記入欄ですので、htmlタグは自由に変更可能です。テキスト部分をimgタグ等で画像に変更することも可能です。

STEP3 横幅100%表示を利用している場合
デザイン管理→商品一覧ページ設定「一覧の表示幅」で、「100%幅」を利用している場合は、下記の指定をスタイルシートの編集から追加してください。
※通常幅表示の場合は、必要ありません。
.widemode ul.dropdown {
width: 100%;
}
独自ドメインをご利用の場合
SSL保護下のページ(新規登録、お問い合わせ、ログイン、マイページ、メールマガジン、携帯サイトアドレスページ)へのリンクをメニュー内に追加される場合は、下記のFAQをご覧ください。
https://www.ocnk.net/faq/index.php?action=artikel&id=986

画像を利用する場合
SSL保護下のページ(新規登録、お問い合わせ、ログイン、マイページ、メールマガジン、携帯サイトアドレスページ)にも表示されますので、必ず画像URLは、https://共用ドメインURLのように記載してください。

例)アカウントID:ocnkdemo  独自ドメイン利用:http://www.ocnkdemo.net/の場合
https://ocnkdemo.ocnk.net/data/ocnkdemo/image/file.gif

例)アカウントID:ocnkdemo2 共用ドメイン利用:http://ocnkdemo2.ocnk.net/の場合
https://ocnkdemo2.ocnk.net/data/ocnkdemo2/image/file.gif

溢れた場合のメニュー表示について
サイト横幅よりもメニュー横幅が大きい場合、開閉形式かドロップダウン形式での表示が可能です。
下記のように指定いただくことで、自由記入欄モードでも利用できます。
<div class="clearfix" id="globalnavi" data-drilldown="off">

・data-drilldown="off" の場合
溢れたリンクを右端の開閉ボタンで開く形式。メニューは横表示。
<div id="globalnavi" class="clearfix" data-drilldown="off">...</div>

・data-drilldown="on" の場合
溢れたメニューはマウスオーバーでドロップダウンで開く形式。メニューは縦表示。
<div id="globalnavi" class="clearfix" data-drilldown="on">...</div>