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

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

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

Breadcrumbs & Multi-Step Indicator

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

デモページ

HTML

HTMLの基本構造です。

[html]

[/html]

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

基本のスタイル

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

[css]
.cd-breadcrumb li::after, .cd-multi-steps li::after {
display: inline-block;
content: '\00bb';
margin: 0 .6em;
color: #959fa5;
}
[/css]

デモページ: 1. Basic

区切りを変更

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

[css]
.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;
}
[/css]

デモページ: 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