echo-step
順番に訪問させることを目的としたナビゲーションを表示する。.echo-nav.echo-nav-vertical
を包括する。
最大幅は 26rem (416px)
となる。
ナビゲーションの性格上、いずれかのリンクに .is-current
を付与することが前提となっている。
ol
でマークアップするとリストの連番が付与される。
olでマークアップした場合
ulでマークアップした場合
<p class="echo-title echo-title-style-a echo-title-level-4">olでマークアップした場合</p>
<div class="echo-step">
<nav class="echo-nav echo-nav-vertical">
<ol 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">吾輩は猫である名前はまだ無い</a>
</li>
<li class="echo-nav-item">
<a href="#" class="echo-nav-label">どこで生れたかとんと検討がつかぬ</a>
</li>
</ol>
</nav><!-- /.nav -->
</div><!-- /.echo-step -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg">ulでマークアップした場合</p>
<div class="echo-step">
<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>
</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>
<li class="echo-nav-item">
<a href="#" class="echo-nav-label">どこで生れたかとんと検討がつかぬ</a>
</li>
</ul>
</nav><!-- /.nav -->
</div><!-- /.echo-step -->