CSS3面包屑導航和多步驟指示

HTML

HTML結構非常簡單，一個有序列表ol，外面又<nav>包裹。

面包屑導航條的結構，我們給ol加上class樣式為：.cd-breadcrumb，那么當前位置的層級li加上class樣式為：.current。

<nav>
    <ol class="cd-breadcrumb">
        <li><a href="#0">首頁</a></li>
        <li><a href="#0">開發</a></li>
        <li><a href="#0">Web</a></li>
        <li class="current"><em>技術熱點</em></li>
    </ol>
</nav>

多步驟指示的結構，我們給ol加上class樣式為：.cd-multi-steps，已完成的步驟的li加上class樣式：.visited，當前步驟li加上class樣式：.current。

<nav>
    <ol class="cd-multi-steps text-center">
        <li class="visited"><a href="#0">購物車</a></li>
        <li class="visited" ><a href="#0">結算付款</a></li>
        <li class="current"><em>送貨</em></li>
        <li><em>驗貨收貨</em></li>
    </ol>
</nav>

CSS

首先，我們使用::after偽元素來創建分隔符元素，就是層級之間的分割。

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

如果我們需要使用自定義的分隔符，可以自定義樣式 .custom-separator，并將樣式添加到<ol>元素上，例如：

<nav>
    <ol class="cd-breadcrumb custom-separator">
        <li><a href="#0">首頁</a></li>
        <li><a href="#0">開發</a></li>
        <li><a href="#0">Web</a></li>
        <li class="current"><em>技術熱點</em></li>
    </ol>
</nav>

完了分隔符的樣式.custom-separator這樣寫：

.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;
}

如果你像給面包屑導航和分步驟指示加上小圖標，可以這些寫樣式，本例中我們使用svg文件來作圖標處理。

.cd-breadcrumb.custom-icons li > *::before, 
.cd-multi-steps.custom-icons li > *::before {
  /* add a custom icon before each item */
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: .4em;
  margin-top: -2px;
  background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
  vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
  /* change custom icon using image sprites */
  background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
  background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
  background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, 
.cd-multi-steps.custom-icons li.current:first-of-type > *::before {
  /* change custom icon for the current item */
  background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
  background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
  background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
  background-position: -60px -20px;
}

當然，我們也可以將三角形箭頭設置成分隔符，代碼如下：

.cd-breadcrumb.triangle li::after, 
  .cd-breadcrumb.triangle li > *::after {
    /* 
        li > *::after is the colored triangle after each item
        li::after is the white separator between two items
    */
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    /* 48px is the height of the <a> element */
    border: 24px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
  }
  .cd-breadcrumb.triangle li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #ffffff;
    /* reset style */
    margin: 0;
  }
  .cd-breadcrumb.triangle li > *::after {
    /* this is the colored triangle after each element */
    z-index: 2;
    border-left-color: inherit;
  }
  .cd-breadcrumb.triangle li:last-of-type::after, 
  .cd-breadcrumb.triangle li:last-of-type > *::after {
    /* hide the triangle after the last step */
    display: none;
  }

對于分步驟指示我們還可以添加class如：.text-center, .text-top和 .text-bottom來讓文字的位置對齊，還可以添加class如count用來標記步驟數，如以下代碼：

<nav>
    <ol class="cd-multi-steps text-bottom count">
        <li class="visited"><a href="#0">購物車</a></li>
        <li class="visited" ><a href="#0">結算付款</a></li>
        <li class="current"><em>送貨</em></li>
        <li><em>驗貨收貨</em></li>
    </ol>
</nav>

各種添加的樣式具體可以看演示demo，我們的demo中給出9種不同的示例，查看頁面源代碼你就會有收獲。