CSS3面包屑导航

Posted 2020-07-11

原文：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>