侧边栏导航条
分享一个带动画效果的导航条，滑出块宽度根据文字多少自适应，下边简单说下实现方法。
预览地址：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"></i>
<span>博客首页</span>
</a>
<a href="#">
<i class="iconfont"></i>
<span>技术相关</span>
</a>
<a href="#">
<i class="iconfont"></i>
<span>作品分享</span>
</a>
<a href="#">
<i class="iconfont"></i>
<span>游戏人生</span>
</a>
<a href="#">
<i class="iconfont"></i>
<span>闲言碎语</span>
</a>
<a href="#">
<i class="iconfont"></i>
<span>小技巧</span>
</a>
<a href="#" class="navBarbot iconfont"></a>
</nav>
css样式
关于样式方面，挑出需要注意的说一下，其他比较简单就略过了。
sideNavBar的高度用的是height: 100vh，vh这个单位还是比较厉害的，如果直接用100%高度的话，需要先给html、body设置百分百高度才行，而用vh的话，就是直接根据视窗的高度计算进行计算。i以及span需要设置一下层级，让i的z-index在span之上。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，例子也比较简单，没什么过多可说的，就到这里了。
