[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル

レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。

HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。

サイトのキャプチャ

Breadcrumbs & Multi-Step Indicator

デモページでは計9種類のパンくずとマルチステップがあり、それぞれレスポンシブ対応となっています。

デモのキャプチャ

デモページ

HTML

HTMLの基本構造です。

<nav>
	<ol class="cd-breadcrumb">
		<li><a href="#0">Home</a></li>
		<li><a href="#0">Gallery</a></li>
		<li><a href="#0">Web</a></li>
		<li class="current"><em>Project</em></li>
	</ol>
</nav>

nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。

基本のスタイル

基本のスタイルでは各アイテムを並らべるために「display: inline-block;」し、疑似要素でアイテムを分離します。

.cd-breadcrumb li::after, .cd-multi-steps li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}
パンくずのデモ

デモページ: 1. Basic

区切りを変更

カスタマイズも簡単で、例えば区切りを変更したい時はol要素にclassを追加し、そこに区切りを設定します。

.cd-breadcrumb.custom-separator li::after, 
.cd-multi-steps.custom-separator li::after {
  /* replace the default separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}
パンくずのデモ

デモページ: 2. Custom Separator

アイコンを加えたり、区切りを三角にしたりなど、さまざまなカスタマイズが可能で、デモファイルは一式で元ページからダウンロードできます。

パンくずのデモ

デモページ: 3. Custom Icons

パンくずのデモ

デモページ: 4. Triangle

パンくずのデモ

デモページ: 5. Triangle with custom icons

ステップのデモ

デモページ: 6. Basic Multi-Steps

ステップのデモ

デモページ: 7. Basic Multi-Steps with Custom Icons

ステップのデモ

デモページ: 8. Dot Indicators

ステップのデモ

デモページ: 9. Dot Indicators with Steps Counter

sponsors

top of page

©2018 coliss