首页手记原来你是这样的导航条--一个不规则导航条的实现思路

原来你是这样的导航条--一个不规则导航条的实现思路

标签：

Html/CSS Html5 CSS3

项目中有一个需求是制作不规则导航条，主要用于对当前用户操作进度的提示。设计如图：

由于工期紧开始计划不规则图形部分用图片解决，但仔细一想，其实用css的方法也是可以解决的，解决办法如下：

分析

简单分析一下这个导航条的结构和实现难点：

导航条两端圆角
每一个项目之间都由不规则箭头分割，『active状态』的蓝色背景也是一个不规则的图形。

实现

1.先把导航条的基本结构实现。

html：

<div class="step">
   <ul class="clearfix">
     <li >购物车</li>
     <li class="active">确认订单信息</li>
     <li>成功提交订单</li>
     <li>商品评论</li>
    </ul>
 </div>

----------

less：

      @color_base:#1787e9; //蓝色
      @color_gray2:#767676; //灰色
       .step{
            width: 600px;   
            ul{
                margin: 4px 0px;
                height: 30px;
                line-height: 30px;
                li{
                    float: left;
                    width: 150px;
                    color: #fff;
                    text-align: center;
                    font-size: 12px;
                    background-color: @color_gray2;
                    &.active{
                        background-color: @color_base;
                    }   
                }
            }
        }

效果如图：

实现分割
做这里的时候在群里收集了一下大家的方法。这里简单说几个思路，以及我的解决办法：
1）思路一：拼接三角形，css实现两个三角形的堆叠，用不一样的三角形拼出箭头形状。
我们通过给li元素增加样式：
```
width: 140px;
margin: 0px 5px;
```
使li之间多出10px的缝隙，然后给ul加一个灰色背景（#ccc），效果如图：

然后添加三角形，效果如图：（两个小三角形首尾相连）

其实还有其他组合方式，比如这种：（三角形上下堆叠，父元素overflow:hidden）

2) 思路二：利用:before和:after伪类实现三角形，好处是不用增加其他元素。算是思路一的变体。
代码如下：

效果图：

3）思路三：我的方法，解决思路是利用:before和图标字体（Font Awesome）。

在基本结构的基础上给li的:before应用图标字体：

li{
                    position: relative;
                    float: left;
                    width: 150px;
                    color: #fff;
                    text-align: center;
                    font-size: 12px;
                    background-color: @color_gray2;
                    &:before{
                        position: absolute;
                        right: -19px;
                        z-index: 20;
                        font-size: 50px;
                        font-family: 'FontAwesome';
                        content: "\f054";
                        line-height: 35px;
                        color:@color_gray3;
                    }
                    &.active{
                        background-color: @color_base;
                    }
                    &:last-child:before{
                        display: none;
                    }
                }

效果图如下：

之后就是给ul设置圆角并且设置超出隐藏

border-radius: 15px;
overflow: hidden;

效果如图：

根据这个思路我们可以对分割进行其他样式的变化比如：（举个栗子）

完整代码如下

html：

<div class="step">
   <ul class="clearfix">
     <li >购物车</li>
     <li class="active">确认订单信息</li>
     <li>成功提交订单</li>
     <li>商品评论</li>
    </ul>
 </div>

----------

less：

      @color_base:#1787e9; //蓝色
      @color_gray2:#767676; //灰色
       .step{
            width: 600px;   
            ul{
                margin: 4px 0px;
                height: 30px;
                line-height: 30px;
                border-radius: 15px;
                overflow: hidden;
                li{
                    position: relative;
                    float: left;
                    width: 150px;
                    color: #fff;
                    text-align: center;
                    font-size: 12px;
                    background-color: @color_gray2;
                    &:before{
                        position: absolute;
                        right: -19px;
                        z-index: 20;
                        font-size: 50px;
                        font-family: 'FontAwesome';
                        content: "\f054";
                        line-height: 35px;
                        color:@color_gray3;
                    }
                    &.active{
                        background-color: @color_base;
                    }
                    &:last-child:before{
                        display: none;
                    }
                }
            }
        }

这篇手记仓促完成，感谢群里的小伙伴们的帮助。如果大家还有别的方法，期待告知！谢啦!!(*＾-゜)v

点击查看更多内容