仿京东右侧固定栏便捷按钮

京东官网上面，有很多用户体验好的小交互，这些交互特效其实写起来不难，但是这些特效让用户在使用的过程中感觉很舒服，而且感觉好玩。所以这篇文章主要分享其中的一个交互效果，后期将会分享更多其他效果。

这次的交互效果是官网上面，右侧的小按钮，这些小按钮可以让用户快速跳转，所以是便捷按钮。不需要js，只需通过css就可以达到效果，所以简单易用而且效果好。

先看一下效果：

仿京东右侧固定栏便捷按钮

通过效果可以观察到，其实里面的交互效果，主要就是通过过渡属性来实现，所以开发起来非常简单。

现在看一下它的结构，主要分成上下两部分，其中每个按钮可以通过li标签来管理，每个li内部又分成两部分：一部分是默认状态下显示的图标按钮，另外一部分是鼠标悬停上去显示的文字。

结构代码如下：

<div id="right-nav">
    <div class="w">
        <ul id="right-nav-list1">
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_24.png"></a><div>京东会员</div></li>
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_03.png"></a><div>购物车</div></li>
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_06.png"></a><div>我的关注</div></li>
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_20.png"></a><div>我的足迹</div></li>
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_11.png"></a><div>我的消息</div></li>
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_17.png"></a><div>咨询JIMI</div></li>
        </ul>
        <ul id="right-nav-list2">
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_28.png"></a><div>顶部</div></li>
            <li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_30.png"></a><div>反馈</div></li>
        </ul>
    </div>
</div>

css代码也是比较简单，基本的布局代码，通过定位来实现。

代码如下：

        *{
            margin: 0;
            padding:0;
        }
        ul{
            list-style: none;
        }
        #right-nav{
            width:40px;
            height: 100%;
            position: fixed;
            top:0;
            right:0;
            z-index: 20;
            border-right: 5px solid  #7A6E6E;
        }
        #right-nav .w{
            position: fixed;
            bottom:22px;
            right:0;
            width:40px;
            height: 76%;
        }
        #right-nav-list1{
            position: relative;
            right: 0;
            top: 0;
            z-index: 20;
        }
        #right-nav-list2{
            position: fixed;
            right: 0;
            bottom: 0;
            z-index: 20;
        }
        #right-nav li{
            position: relative;
            left: 0;
            top: 0;
            height: 34px;
            width: 40px;
            margin-bottom: 1px;
            cursor: pointer;
        }
        #right-nav li a{
            width: 100%;
            height: 100%;
            display: block;
            background: #7a6e6e;
            padding: 7px;
            box-sizing: border-box;
            border-radius: 3px;
        }
        #right-nav li div{
            position: absolute;
            left: 50px;
            top: 0;
            z-index: -1;
            font-size: 12px;
            background: #c81623;
            color: #fff;
            height: 34px;
            width: 60px;
            line-height: 31px;
            text-align: center;
            border-radius: 3px;
            transition: all linear 300ms;
        }
        #right-nav li:hover,#right-nav li:hover a{
            background-color: #c81623;
        }
        #right-nav li:hover div{
            left:-58px;
        }