ナビゲーションのHTMLとCSS

標準のナビゲーション

<var>navigation[1|2|3]</var>

これは、標準のナビゲーションの仕様で、この[]でくくられた中身は、あまり意味がない。
この中を「name」などという文字と置き換えても問題なく表示されるが、どう置き換えても問題がないとは言い切れないので、使用するのであれば、このまま使用した方が無難。
※[]の中身を空にすると動作しない。

※第二階層のみを表示させたいなどという用途には不向き

標準のナビゲーションで書き出されるHTML

<div id="cc-inner" class="cc-content-parent">

<div data-container="navigation">

<div class="j-nav-variant-standard">


<ul id="mainNav1" class="mainNav1">

<li><a class="level_1"><span>ホーム</span></a></li>

<li><a class="parent level_1"><span>サービス内容</span></a></li>
上記parentは下層メニューの親であることを表している

ここが第二階層になる ネスト(入れ子構造)されない。

<li>

<ul id="mainNav2" class="mainNav2">

<li>

<a  class="current level_2"><span>サービスの詳細</span></a></li>

</ul>

</li>
※上記class名 currentはこのメニューが選択されていることを表す。


<li>

<a class="level_1"><span>事例</span></a>

</li>

<li id="cc-nav-view-2338789492">

<a class="level_1"><span>会社案内</span></a>

</li>

</ul>

</div>

</div>

</div>

standard

<var levels="1,2,3" expand="true" variant="standard" edit="1">navigation</var>

構造は標準ナビゲーションと変わらないが、バリエーションが広がる。

levels: 1,2,3 or 1,2 or 2,3 or 1 or 2 or 3 表示階層を指示

expand: true or false 展開ありなし。

edit: ナビゲーション操作用のスイッチのつもりで作ったのか? 数値を変えてみたが不明

最大の特徴は、階層構造の表示方法にある。(リストの使い方)

出力されるHTMLタグ

<div id="cc-inner" class="cc-content-parent">
<div data-container="navigation">
<div class="j-nav-variant-standard">
<ul id="mainNav1" class="mainNav1">

<li><a class="level_1"><span>ホーム</span></a></li>

■以下が親子関係となる class名parentが子供を持っていることを表している
<li><a class="parent level_1"><span>CONTENT1</span></a></li>
<li>
<ul id="mainNav2" class="mainNav2">
<li><a class="current level_2"><span>サービスの詳細</span></a></li>
</ul>
</li>
※<span>の存在はCSSを書く上で非常に大きい。


<li><a class="level_1"><span>CONTENT2</span></a></li>
<li><a class="level_1"><span>CONTENT3</span></a></li>
</ul>

</div>

</div>
</div>

ナビゲーション 【nedted】

<var levels="1,2,3" expand="true" variant="nedted" edit="1">navigation</var>

<div data-container="navigation">
<div class="j-nav-variant-nested">

<ul class="cc-nav-level-0 j-nav-level-0">

ULのクラス名

 cc-nav-level-0
 j-nav-level-0


<li class="jmd-nav__list-item-0 cc-nav-current j-nav-current jmd-nav__item--current">

liのクラス名
 jmd-nav__list-item-0
 cc-nav-current
 j-nav-current
 jmd-nav__item--current

※子供が選択されている時
 cc-nav-parent
 j-nav-parent
 
<a class="cc-nav-current j-nav-current jmd-nav__link--current">ホーム</a>
</li>

選択中のaのクラス名
 cc-nav-current
 j-nav-current
 jmd-nav__link--current


<li class="jmd-nav__list-item-0 j-nav-has-children">

子供を持つliのクラス名
 jmd-nav__list-item-0 共通
 j-nav-has-children 子供がいるよ!

<a>サービス内容</a>

<span class="jmd-nav__toggle-button"></span>
特徴:トグルボタン用のspan(開閉式ボタンを作る用に利用)
 jmd-nav__toggle-button

ここがネストされている
<ul class="cc-nav-level-1 j-nav-level-1">

第二階層のulのクラス名

 cc-nav-level-1
 j-nav-level-1


<li class="jmd-nav__list-item-1"><a>サービスの詳細</a></li>
第二階層のliのクラス名
 jmd-nav__list-item-1
</ul>
</li>

</ul>


</div>
</div>

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422