echo-nav
クリック範囲が広いナビゲーションを表示する。包括要素、もしくは .echo-nav
自体に薄い背景色を指定する必要がある。
テキストが複数行になった場合でも、ナビゲーションのすべてのテキストが縦中央に整列する。
.echo-nav-label
内に、装飾目的等で子要素を使用すると崩れる場合は、ダミーのインライン要素を緩衝として加える。ここでは span.echo-nav-text
としている。
補足:ボタンを均等幅にする場合
.echo-nav-item
の flex-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
.
(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) |
Font Awesomeを併用した例
<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
に対応している。
.echo-nav-sm
(default)
.echo-nav-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) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
.echo-nav-sm
(default)
.echo-nav-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-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階層まで表示できる。
Font Awesomeを併用した例
左揃えのナビゲーションボタンにアイコンを使用した場合、アイコンの位置がずれてしまうため、要素の幅を固定する必要がある。
<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
自体に濃い背景色を指定する必要がある。
Font Awesomeを併用した例
<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>