CSS3麪包屑導航

原文：http://www.helloweba.com/view-blog-347.html

 

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>