module-nav

echo-nav

クリック範囲が広いナビゲーションを表示する。包括要素、もしくは .echo-nav 自体に薄い背景色を指定する必要がある。
テキストが複数行になった場合でも、ナビゲーションのすべてのテキストが縦中央に整列する。

.echo-nav-label 内に、装飾目的等で子要素を使用すると崩れる場合は、ダミーのインライン要素を緩衝として加える。ここでは span.echo-nav-text としている。

補足:ボタンを均等幅にする場合

.echo-nav-itemflex-basis プロパティの値は auto である。
0% を指定すると、各ボタンは画面に対し自動的に均等幅となるが、Internet Explorerでナビゲーションのボタンが重なりクリックできなくなる。

これはInternet Explorerがflex-basisを正しく解釈できないことによる不具合である。IEに対応するには、均等幅にしたい .echo-nav のdisplayプロパティを block に変更すること。

Note: When making the width of the buttons even

The value of the flex-basis property of .echo-nav-item is auto.
If 0% is specified, each button will automatically be evenly widthd to the screen, but the navigation buttons will overlap and cannot be clicked in Internet Explorer.

This is a bug because Internet Explorer cannot interpret flex-basis correctly. To support IE, change the display property of .echo-nav that you want to have an even width to block.

.echo-nav-labelのスタイルの変化 group: form
(breakpoint).echo-nav-sm.echo-nav.echo-nav-lg
(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ
md以下 xs 2.25rem
(36px)
sm 2.5rem
(40px)
md 2.75rem
(44px)
lg以上 sm 2.5rem
(40px)
md 2.75rem
(44px)
lg 3.125rem
(50px)

この表の解説

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

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">Font Awesomeを併用した例</p>

<nav class="echo-nav">
    <ul class="echo-nav-list">
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-home"></i><br>吾輩は</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-user"></i><br>猫である</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label is-current"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-taxi"></i><br>名前はまだ無い</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-map"></i><br>どこで</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-envelope"></i><br>生れたか</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-shopping-cart"></i><br>とんと</span></a>
        </li>
    </ul>
</nav><!-- /.echo-nav -->

sub class echo-nav-(size)

ナビゲーションのリンクの文字サイズと最低高さを変更する。
(size)は、 sm, lg に対応している。

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">.echo-nav-sm</p>

<nav class="echo-nav echo-nav-sm">
    <ul class="echo-nav-list">
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text">ボタン</span></a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
    </ul>
</nav><!-- /.echo-nav -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">(default)</p>

<nav class="echo-nav">
    <ul class="echo-nav-list">
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text">ボタン</span></a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
    </ul>
</nav><!-- /.echo-nav -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">.echo-nav-lg</p>

<nav class="echo-nav echo-nav-lg">
    <ul class="echo-nav-list">
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text">ボタン</span></a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
    </ul>
</nav><!-- /.echo-nav -->

sub class echo-nav-fixed

.echo-nav-(size) と同時に付与すると、 (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">.echo-nav-sm</p>

<nav class="echo-nav echo-nav-fixed echo-nav-sm">
    <ul class="echo-nav-list">
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text">ボタン</span></a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
    </ul>
</nav><!-- /.echo-nav -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">(default)</p>

<nav class="echo-nav echo-nav-fixed">
    <ul class="echo-nav-list">
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text">ボタン</span></a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
    </ul>
</nav><!-- /.echo-nav -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">.echo-nav-lg</p>

<nav class="echo-nav echo-nav-fixed echo-nav-lg">
    <ul class="echo-nav-list">
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text">ボタン</span></a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
    </ul>
</nav><!-- /.echo-nav -->

sub class echo-nav-vertical

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

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

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">Font Awesomeを併用した例</p>

<p>左揃えのナビゲーションボタンにアイコンを使用した場合、アイコンの位置がずれてしまうため、要素の幅を固定する必要がある。</p>

<nav class="echo-nav echo-nav-vertical">
    <ul class="echo-nav-list">
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-lg echo-margin-right-xs fas fa-home" style="width: 1.5em; text-align: center;"></i>吾輩は</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-lg echo-margin-right-xs fas fa-user" style="width: 1.5em; text-align: center;"></i>猫である</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label is-current"><span class="echo-nav-text"><i class="echo-text-lg echo-margin-right-xs fas fa-taxi" style="width: 1.5em; text-align: center;"></i>名前はまだ無い</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-lg echo-margin-right-xs fas fa-map" style="width: 1.5em; text-align: center;"></i>どこで</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-lg echo-margin-right-xs fas fa-envelope" style="width: 1.5em; text-align: center;"></i>生れたか</span></a>
        </li>
        <li class="echo-nav-item">
            <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-lg echo-margin-right-xs fas fa-shopping-cart" style="width: 1.5em; text-align: center;"></i>とんと</span></a>
        </li>
    </ul>
</nav><!-- /.echo-nav -->

sub class echo-nav-inverse

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

<div class="echo-padding-sm" style="background-color: #39c;">
    <nav class="echo-nav echo-nav-inverse">
        <ul class="echo-nav-list">
            <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
            <li class="echo-nav-item"><a href="#" class="echo-nav-label is-current">現在のページ</a></li>
            <li class="echo-nav-item"><a href="#" class="echo-nav-label">文字数が多いボタンです</a></li>
            <li class="echo-nav-item"><a href="#" class="echo-nav-label"><span class="echo-nav-text"><span class="echo-text-xs">複数行の</span><br>ボタン</span></a></li>
            <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
            <li class="echo-nav-item"><a href="#" class="echo-nav-label">ボタン</a></li>
        </ul>
    </nav><!-- /.echo-nav -->
</div>

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">Font Awesomeを併用した例</p>

<div class="echo-padding-sm echo-bg-default">
    <nav class="echo-nav echo-nav-inverse">
        <ul class="echo-nav-list">
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-home"></i><br>吾輩は</span></a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-user"></i><br>猫である</span></a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label is-current"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-taxi"></i><br>名前はまだ無い</span></a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-map"></i><br>どこで</span></a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-envelope"></i><br>生れたか</span></a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label"><span class="echo-nav-text"><i class="echo-text-xxl echo-padding-bottom-xs fas fa-shopping-cart"></i><br>とんと</span></a>
            </li>
        </ul>
    </nav><!-- /.echo-nav -->
</div>