module-nav

m-nav

クリック範囲が広いナビゲーションを表示する。包括要素、もしくは.nav自体に薄い背景色を指定する必要がある。
テキストが複数行になった場合でも、ナビゲーションのすべてのテキストが縦中央に整列する。
.m-nav-label 内で装飾用の要素を使用すると崩れるため、その場合はダミーのインライン要素を加える。ここでは span.m-nav-text としている。

m-nav-label のみ使用し、ナビゲーションの分割はグリッドにした場合

アイコンを併用した例（幅を100%にすると自動的に均等幅となる）

<nav class="m-nav">
    <div class="m-nav-list">
        <p class="m-nav-item">
            <a href="#" class="m-nav-label">ボタン</a>
        </p>
        <p class="m-nav-item">
            <a href="#" class="m-nav-label is-current">現在のページ</a>
        </p>
        <p class="m-nav-item">
            <a href="#" class="m-nav-label">文字数が多いボタンです</a>
        </p>
        <p class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><span class="u-text-xs">複数行の</span><br>ボタン</span></a>
        </p>
        <p class="m-nav-item">
            <a href="#" class="m-nav-label">ボタン</a>
        </p>
        <p class="m-nav-item">
            <a href="#" class="m-nav-label">ボタン</a>
        </p>
    </div><!-- /.nav-list -->
</nav><!-- /.nav -->

<h3 class="u-text-lg u-margin-top-lg">m-nav-label のみ使用し、ナビゲーションの分割はグリッドにした場合</h3>
<ul class="l-grid-row l-grid-row-0">
    <li class="l-grid-col-4 l-grid-col-md-2">
        <a href="#" class="m-nav-label">ボタン</a>
    </li>
    <li class="l-grid-col-4 l-grid-col-md-3">
        <a href="#" class="m-nav-label is-current">現在のページ</a>
    </li>
    <li class="l-grid-col-4 l-grid-col-md-3">
        <a href="#" class="m-nav-label">ボタン</a>
    </li>
    <li class="l-grid-col-6 l-grid-col-md-2">
        <a href="#" class="m-nav-label">ボタン</a>
    </li>
    <li class="l-grid-col-6 l-grid-col-md-2">
        <a href="#" class="m-nav-label">ボタン</a>
    </li>
</ul>

<h3 class="u-text-lg u-margin-top-lg">アイコンを併用した例（幅を100%にすると自動的に均等幅となる）</h3>
<nav class="m-nav" style="width: 100%;">
    <ul class="m-nav-list">
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-home" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>吾輩は</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-user" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>猫である</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label is-current"><span class="m-nav-text"><i class="fas fa-taxi" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>名前はまだ無い</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-map" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>どこで</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-envelope" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>生れたか</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-shopping-cart" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>とんと</span></a>
        </li>
    </ul>
</nav><!-- /.nav -->

幅100%の垂直ナビゲーションとして表示する。3階層まで表示できる。

アイコンを併用した例

<nav class="m-nav m-nav-vertical">
    <ul class="m-nav-list">
        <li class="m-nav-item">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label is-current">現在のページ</a>
            <ul class="m-nav-list m-nav-children">
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">2階層目ボタン</a>
                    <ul class="m-nav-list m-nav-children">
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">3階層目ボタン</a>
                        </li>
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">3階層目ボタン</a>
                        </li>
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">3階層目ボタン</a>
                        </li>
                    </ul>
                </li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">2階層目ボタン</a>
                </li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">2階層目ボタン</a>
                </li>
            </ul>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label">文字数がとてもすごくびっくりするほど衝撃的に多いボタンです。ナビゲーションとしてどうかと思います</a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><span class="u-text-xs">複数行の</span><br>ボタン</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
    </ul>
</nav><!-- /.nav -->

<h3 class="u-text-lg u-margin-top-lg">アイコンを併用した例</h3>
<nav class="m-nav m-nav-vertical">
    <ul class="m-nav-list">
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-home" style="font-size: 1.25em; width: 1.5em; text-align: center; margin-right: .5em;"></i>吾輩は</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-user" style="font-size: 1.25em; width: 1.5em; text-align: center; margin-right: .5em;"></i>猫である</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label is-current"><span class="m-nav-text"><i class="fas fa-taxi" style="font-size: 1.25em; width: 1.5em; text-align: center; margin-right: .5em;"></i>名前はまだ無い</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-map" style="font-size: 1.25em; width: 1.5em; text-align: center; margin-right: .5em;"></i>どこで</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-envelope" style="font-size: 1.25em; width: 1.5em; text-align: center; margin-right: .5em;"></i>生れたか</span></a>
        </li>
        <li class="m-nav-item">
            <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-shopping-cart" style="font-size: 1.25em; width: 1.5em; text-align: center; margin-right: .5em;"></i>とんと</span></a>
        </li>
    </ul>
</nav><!-- /.nav -->

ナビゲーションのボタンの色を反転する。包括要素、もしくは.nav自体に濃い背景色を指定する必要がある。

m-nav-label のみ使用し、ナビゲーションの分割はグリッドにした場合

アイコンを併用した例（幅を100%にすると自動的に均等幅となる）

<div class="u-padding-sm u-bg-first">
    <nav class="m-nav m-nav-inverse">
        <div class="m-nav-list">
            <p class="m-nav-item">
                <a href="#" class="m-nav-label">ボタン</a>
            </p>
            <p class="m-nav-item">
                <a href="#" class="m-nav-label is-current">現在のページ</a>
            </p>
            <p class="m-nav-item">
                <a href="#" class="m-nav-label">文字数が多いボタンです</a>
            </p>
            <p class="m-nav-item">
                <a href="#" class="m-nav-label"><span class="m-nav-text"><span class="u-text-xs">複数行の</span><br>ボタン</span></a>
            </p>
            <p class="m-nav-item">
                <a href="#" class="m-nav-label">ボタン</a>
            </p>
            <p class="m-nav-item">
                <a href="#" class="m-nav-label">ボタン</a>
            </p>
        </div><!-- /.nav-list -->
    </nav><!-- /.nav -->
</div>

<h3 class="u-text-lg u-margin-top-lg">m-nav-label のみ使用し、ナビゲーションの分割はグリッドにした場合</h3>
<div class="u-padding-sm u-bg-second">
    <ul class="l-grid-row l-grid-row-0 m-nav-inverse">
        <li class="l-grid-col-6 l-grid-col-md-2">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
        <li class="l-grid-col-6 l-grid-col-md-3">
            <a href="#" class="m-nav-label is-current">現在のページ</a>
        </li>
        <li class="l-grid-col-4 l-grid-col-md-3">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
        <li class="l-grid-col-4 l-grid-col-md-2">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
        <li class="l-grid-col-4 l-grid-col-md-2">
            <a href="#" class="m-nav-label">ボタン</a>
        </li>
    </ul>
</div>

<h3 class="u-text-lg u-margin-top-lg">アイコンを併用した例（幅を100%にすると自動的に均等幅となる）</h3>
<div class="u-padding-sm u-bg-gray">
    <nav class="m-nav m-nav-inverse" style="width: 100%;">
        <ul class="m-nav-list">
            <li class="m-nav-item">
                <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-home" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>吾輩は</span></a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-user" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>猫である</span></a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label is-current"><span class="m-nav-text"><i class="fas fa-taxi" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>名前はまだ無い</span></a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-map" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>どこで</span></a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-envelope" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>生れたか</span></a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label"><span class="m-nav-text"><i class="fas fa-shopping-cart" style="font-size: 1.5em; display: block; text-align: center; padding-bottom: .2em;"></i>とんと</span></a>
            </li>
        </ul>
    </nav><!-- /.nav -->
</div>