CSS3侧边栏动画导航条

侧边栏导航条
分享一个带动画效果的导航条，滑出块宽度根据文字多少自适应，下边简单说下实现方法。
预览地址：CSS3侧边栏动画导航条

html结构

结构比较简单，就是一个a标签包含两个子标签，其中i是用来放矢量字体图标，当然也可以是图片，span标签来放文字。

<nav class="sideNavBar">
    <a href="http://www.mobai.pro" target="_blank" class="logo"><img src="http://www.mobai.pro/templets/default/img/logo.png" alt="logo"></a>
    <a href="#">
        <i class="iconfont">&#xe613;</i>
        <span>博客首页</span>
    </a>
    <a href="#">
        <i class="iconfont">&#xe605;</i>
        <span>技术相关</span>
    </a>
    <a href="#">
        <i class="iconfont">&#xe637;</i>
        <span>作品分享</span>
    </a>
    <a href="#">
        <i class="iconfont">&#xe6ed;</i>
        <span>游戏人生</span>
    </a>
    <a href="#">
        <i class="iconfont">&#xe609;</i>
        <span>闲言碎语</span>
    </a>
    <a href="#">
        <i class="iconfont">&#xe604;</i>
        <span>小技巧</span>
    </a>
    <a href="#" class="navBarbot iconfont">&#xe617;</a>
</nav>

css样式

关于样式方面，挑出需要注意的说一下，其他比较简单就略过了。

1. sideNavBar的高度用的是height: 100vh，vh这个单位还是比较厉害的，如果直接用100%高度的话，需要先给html、body设置百分百高度才行，而用vh的话，就是直接根据视窗的高度计算进行计算。

2. i以及span需要设置一下层级，让i的z-index在span之上。

3. span的宽度问题，如果直接用width:auto的话，会发现失去了过渡效果，可以用max-width:200px来代替width:auto，不过我觉得用transform: scaleX()来实现更好一些，不过用transform: scaleX()的话记得设置transform-origin: left，来指定基点位置。

4. 为了让span的文字不会重叠到i标签上，需要设置文字的颜色从透明到白色，然后给个较短的过渡时间。

下边是span的css：

.sideNavBar > a > span{
    white-space:nowrap;
    padding-left: 70px;
    padding-right: 30px;
    font-size: 16px;
    background: #00baff;
    color: transparent;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .3s, color .1s;
}
.sideNavBar > a:hover > span{
    transform: scaleX(1);
    color: #fff;
}

ok，例子也比较简单，没什么过多可说的，就到这里了。