component-nav

nav

クリック範囲が広いナビゲーションを表示する。
各要素に詳細なクラスを付与できないシステムに対応するため、子・孫階層のセレクタはクラスではなく要素（ul, li）としている。
シングルクラスにしたい場合は /_scss/config_advance.css の各変数を調整すること。

<div class="line-c">
    <nav class="nav">
        <a href="#">ナビ</a><a href="#">ナビナビ</a><span class="nav-label">ラベルです</span><a href="#">ナビ</a><a href="#">ナビナビナビ</a>
    </nav>
</div>

最上層のリストごとにサイトマップ形式で表示する。三段までの階層構造と短いテキストを持たせることができる。

<nav class="nav nav-flat">
    <ul>
        <li><a href="#">ナビゲーション</a></li>
        <li><a href="#">ナビゲーション</a>
            <ul>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">ナビゲーション</a>
            <ul>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーション</a>
                            <ul>
                                <li><a href="#">ナビゲーション</a></li>
                                <li><a href="#">ナビゲーション</a></li>
                                <li><a href="#">ナビゲーション</a></li>
                                <li><a href="#">ナビゲーション</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ナビゲーション</a>
                            <ul>
                                <li><a href="#">ナビゲーション</a></li>
                                <li><a href="#">ナビゲーション</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

三段までの階層構造と複数行のテキストを持たせることができる。

<nav class="nav nav-vertical">
    <ul>
        <li><a href="#">ナビゲーション</a></li>
        <li><a href="#">ナビゲーションナビゲーション</a>
            <ul>
                <li><a href="#">ナビゲーション</a>
                    <ul>
                        <li><a href="#">ナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーション</a></li>
                        <li><a href="#">ナビゲーションナビゲーション</a></li>
                        <li><a href="#">ナビゲーション</a></li>
                    </ul>
                </li>
                <li><a href="#">ナビゲーション</a></li>
                <li><a href="#">ナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーション</a></li>
            </ul>
        </li>
        <li><a href="#">ナビゲーションナビゲーションナビゲーションナビゲーションナビゲーション</a></li>
        <li><a href="#">ナビゲーションナビゲーション</a></li>
        <li><a href="#">ナビゲーション</a></li>
    </ul>
</nav>

二段までの階層構造を持たせることができる。モバイル端末で複数行となったときの表示には対応していない。

<div class="line-c">
    <nav class="nav nav-horizontal">
        <ul>
            <li><a href="#">ナビゲーション</a></li>
            <li><a href="#">ナビゲ</a>
                <ul>
                    <li><a href="#">ナビゲーション</a></li>
                    <li><a href="#">ナビゲーション</a></li>
                    <li><a href="#">ナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーション</a></li>
                </ul>
            </li>
            <li><a href="#">ナビ</a></li>
            <li><a href="#">ナビゲーションナ</a></li>
            <li><a href="#">ナビゲー</a></li>
        </ul>
    </nav>
</div>

.nav-horizontalの外観に加え、ナビゲーションの全体幅が100%、各ボタンが均等幅となる。

<div class="line-c">
    <nav class="nav nav-horizontal nav-justify">
        <ul>
            <li><a href="#">ナビゲーション</a></li>
            <li><a href="#">ナビゲ</a>
                <ul>
                    <li><a href="#">ナビゲーション</a></li>
                    <li><a href="#">ナビゲーション</a></li>
                    <li><a href="#">ナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーション</a></li>
                </ul>
            </li>
            <li><a href="#">ナビ</a></li>
            <li><a href="#">ナビゲーションナ</a></li>
            <li><a href="#">ナビゲー</a></li>
        </ul>
    </nav>
</div>

ページネーションを表示する。.nav-prev, .nav-next以外のa要素は正方形となる。複数行に対応していない。
アイコンは:before,:after疑似要素で作成しているので適当調整すること。

<div class="line-c">
    <nav class="nav nav-pager">
        <a href="#" class="nav-prev">前のページ</a>
        <a href="#">1</a>
        <span class="nav-label">...</span>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">11</a>
        <a href="#">12</a>
        <span class="nav-label">...</span>
        <a href="#">999</a>
        <a href="#" class="nav-next">次のページ</a>
    </nav>
</div>

複数行に対応した、前後移動リンクを表示する。
アイコンは:before,:after疑似要素で作成しているので適当調整すること。

<nav class="nav nav-serial">
    <a href="#" class="nav-prev">エントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトル</a>
    <a href="#" class="nav-next">エントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトル</a>
</nav>