CSS3面包屑导航和多步骤向导效果

作者：简简单单 2016-01-26

面包屑是用来做当前页面所在的站点位置的导航作用，它一层层的表示站点分类或目录层级关系，而多步骤指示经常用在一些分步流程向导的应用，如分步注册向导，货物订购流程。今天我们来用CSS制作面包屑和多步骤指示的应用。

HTML结构非常简单，一个有序列表ol，外面又

包裹。
面包屑导航条的结构，我们给ol加上class样式为：.cd-breadcrumb，那么当前位置的层级li加上class样式为：.current。

多步骤指示的结构，我们给ol加上class样式为：.cd-multi-steps，已完成的步骤的li加上class样式：.visited，当前步骤li加上class样式：.current。

CSS
首先，我们使用::after伪元素来创建分隔符元素，就是层级之间的分割。
.cd-breadcrumb li::after, .cd-multi-steps li::after {
display: inline-block;
content: '\00bb';
margin: 0 .6em;
color: #959fa5;
}
如果我们需要使用自定义的分隔符，可以自定义样式 .custom-separator，并将样式添加到

element */
    border: 24px solid transparent;
    border-right-width: 0;
    border-left-
}
.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用来标记步骤数，如以下代码：

CSS3面包屑导航和多步骤向导效果

相关文章

精彩推荐