9种不同的面包屑和分布式多步骤导航

收藏

本文演示了常用的面包屑导航和分布式多步骤菜单。项目中经常遇到的有三角箭头面包屑（商品详情）、圆点分步指示（运单号查询进错）、带数字的圆点分步指示（购物车结算）

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：基本面包屑

<nav>
    <ol class="cd-breadcrumb">
        <li><a href="http://www.erdangjiade.com">首页</a></li>
        <li><a href="http://www.erdangjiade.com/js">jQuery</a></li>
        <li><a href="http://www.erdangjiade.com/php">PHP</a></li>
        <li class="current"><a href="http://www.erdangjiade.com/templates">模板</a></li>
    </ol>
</nav>

演示二：自定义图标面包屑

<ol class="cd-breadcrumb custom-separator custom-icons"></ol>

演示三：三角箭头面包屑

<ol class="cd-breadcrumb triangle"></ol>

演示四：基本分步指示

<ol class="cd-multi-steps text-center"></ol>

演示五：圆点分步指示

<nav>
    <ol class="cd-multi-steps text-top">
        <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>

演示五：带数字的圆点分步指示

<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>