JS学堂:小米商城右侧导航栏效果

侧边导航栏以及回到顶部已经越来越成为每个网站的必要功能之一，主要向网站的访客展示一些电话、客服QQ、邮箱或者其它信息，通常附带一个「回到顶部」的箭头。网上有很多关于这类效果的例子，姑且自己也总结一个出来，有需要的可以参考。不同的样式效果虽然不同，但原理都是差不多的，下面以小米商城的右侧栏为例

用到的主要知识点：
1.css display 属性;
2.jQuery mouseenter 以及 mouseleave 属性
3.jQuery 动画

从上面的演示图可以看到，小米商城的右侧边栏是由五个带图标及文字的正方形盒子竖着排列的，每一个盒子的宽高都是相等的，分别有 1px 的描边。最后一个盒子「回到顶部」与上边四个有一定的间隙，默认是隐藏的，只有当鼠标滚动滚轮到一定高度后才显示出来。

了解了基本的布局后下面开始写 HTML 布局，在开始之前，先做一些准备工作，引入本次效果需要用到的 jQuery 文件，并且新建一个 demo.css 样式文件以及 demo.js 逻辑文件将其引入到新建好的 HTML 文件中 :

1
2
3

<link rel="stylesheet" href="css/demo.css" type="text/css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/demo.js"></script>

现在，创建一个 id 为 top 的 div 盒子，在里面创建一个 id 为 izl_rmenu，class 也为 izl_rmenu 的 div 标签，接着分别用 1 个 a 标签以及 4 个 div 标签代表侧边栏的五个盒子按钮，代码如下 :

<div id="top">
        <div id="izl_rmenu" class="izl-rmenu">
            <a href="javascript:;" class="btn btn-sao">
                <img src="https://i8.mifile.cn/b2c-mimall-media/cc0b8948a88a08f6f3b7cd826e09ace6.png" alt="" class="sao-before">
                <img src="https://i8.mifile.cn/b2c-mimall-media/1012b08b8f0268aab455c56027109a34.png" alt="" style="display: none" class="sao-hover">
                <p>扫一扫</p>
            </a>
            <div class="btn btn-user">
                <img class="pic" src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" onclick="window.location.href='http://%77%77%77%2e%73%75%63%61%69%6a%69%61%79%75%61%6e%2e%63%6f%6d'">
                <p>个人中心</p>
            </div>
            <div class="btn btn-kefu">
                <img src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                <p>联系客服</p>
            </div>
            <div class="btn btn-shop">
                <img src="https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png" alt="">
                <p>购物车</p>
            </div>
            <div class="btn btn-top">
                <img src="//i1.mifile.cn/f/i/2018/home/totop.png" alt="">
                <p>回顶部</p>
            </div>
        </div>
    </div>

由于没有添加任何样式，现在的效果是这样子的 :

现在我们给它添加一些 css 样式，在 demo.css 文件中添加

1 2	*{margin:0;padding:0;list-style:none;border:none;text-decoration: none} body{height:2000px;font-family: 微软雅黑;background-color: #f5f5f5;}

这样就重置了默认的 css 样式。接着我们给整个容器设置一个「固定定位」，好让它始终固定在页面的特定位置处，

.izl-rmenu{
    position: fixed;
    left: 50%;
    margin-left: 532px;
    bottom: 10px;
    padding-bottom: 73px;
    z-index: 999;
}

然后，我们给每个按钮设置一些共同的样式，包括定义他们的宽高以及水平居中排布，特别注意的是，这里我使用了 display:table ，再结合 vertical-align 还有 text-align 两个属性来使它水平垂直居中，

.izl-rmenu .btn{
    width: 82px;
    height: 90px;
    margin-bottom:1px;
    cursor:pointer;
    position:relative;
    border: 1px solid #f5f5f5;
    color: #757575;
    display: table;
    vertical-align: center;
    text-align: center;
    background-color: #fff;
}

最后，分别给每个 img 标签也就是每个小图标设置宽度还有高度，给回到顶部这个容器添加一些样式，

.izl-rmenu .btn img{
    padding-top: 20px;
    width: 30px;
    height: 30px;
}

.izl-rmenu .btn-top{
    background-color: #fff;
    margin-top: 15px;
}

现在的效果如图，

可以看到，目前的样式与小米商城里的样式已基本差不多了，但现在的效果都是静态的，鼠标滑过并没有什么特效，点击回到顶部也没任何反应，下面就来添加 js 来使它有交互效果
样例效果中当鼠标滑过时会有图标及文字变色的效果，原理是在 HTML 中设置两张图片，一张是鼠标未经过时的图片，一张是鼠标滑过的时候变色的图片，这里我们用 JavaScript 的框架之一 jQuery 来制作动效。
首先，在原先 HTML 布局中添加一张鼠标滑过时的 img ,并且分别设置它们的 class ，以便使用 jQuery 选择器来获取，依次在每个 class 为 btn 的容器下追加一个 img 标签

<a href="javascript:;" class="btn btn-sao">
   <img src="https://i8.mifile.cn/b2c-mimall-media/cc0b8948a88a08f6f3b7cd826e09ace6.png" alt="" class="sao-before">
   <img src="https://i8.mifile.cn/b2c-mimall-media/1012b08b8f0268aab455c56027109a34.png" alt="" style="display: none" class="sao-hover">
   <p>扫一扫</p>
</a>
<div class="btn btn-user">
   <img class="user-before" src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" onclick="window.location.href='http://%77%77%77%2e%73%75%63%61%69%6a%69%61%79%75%61%6e%2e%63%6f%6d'">
   <img src="https://i8.mifile.cn/b2c-mimall-media/41f858550f42eb1770b97faf219ae215.png" alt="" style="display: none" class="user-hover">
   <p>个人中心</p>
</div>
<div class="btn btn-kefu">
   <img src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" alt="" class="kefu-before">
   <img src="https://i8.mifile.cn/b2c-mimall-media/5e9f2b1b0da09ac3b3961378284ef2d4.png" alt="" style="display: none" class="kefu-hover">
   <p>联系客服</p>
</div>
<div class="btn btn-shop">
   <img src="https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png" alt="" class="shop-before">
   <img src="https://i8.mifile.cn/b2c-mimall-media/692a6c3b0a93a24f74a29c0f9d68ec71.png" alt="" style="display: none" class="shop-hover">
   <p>购物车</p>
</div>
<div class="btn btn-top">
   <img src="//i1.mifile.cn/f/i/2018/home/totop.png" alt="" class="top-before">
   <img src="//i1.mifile.cn/f/i/2018/home/totop_hover.png" alt="" style="display: none" class="top-hover">
   <p>回顶部</p>
</div>

打开 demo.js 文件，添加如下代码 :

$(document).ready(function (){
  /* 使用 jq 的 each() 方法遍历整个大的 div 容器，在用 find() 方法寻找当前容器下的子容器，mouseenter 和 mouseleave分别
     为鼠标滑过和鼠标移出时的事件，css() 方法设置所选元素的样式，这里只列举了一个示例代码，要让五个容器都有鼠标滑过的效果，
     只需复制黏贴代码，更改其 find 方法对应的 class 名称就能作用到所有容器上。
  */
  $('#izl_rmenu').each(function () {        
    $(this).find(".btn-sao").mouseenter(function () {  
          $(this).find(".sao-before").css('display','none');
          $(this).find(".sao-hover").css({
              'display':'table',
              'position':'relative',
              'left':'26px'
          });
          $(this).find('p').css({
              'position':'relative',
              'top':'4px',
              'color':'#ff6700'
          });
       });
    $(this).find(".btn-sao").mouseleave(function () {
           $(this).find(".sao-before").css('display','');
           $(this).find(".sao-hover").css({
               'display':'none'
           });
           $(this).find('p').css({
               'position':'',
               'top':'',
               'color':''
           });
    });
  });
});

做完这个效果后，可以看到当鼠标滑动到「扫一扫」容器时，会显示一个二维码，原理是在父容器内设置一个 div ，里面存放二维码文字，默认为隐藏状态，当鼠标滑过的时候，就将其显示出来。下面来实现这个效果。
首先在 HTML 文件中 class 为 ‘btn btn-sao’ 的 a 标签中添加布局代码

 <div class="pic">
    <div class="pic_content">
       <img class="pic_img" src="https://i8.mifile.cn/b2c-mimall-media/2ecd36165b6c2a820a0488fa7a2c4942.png" alt="">
       <span style="display: block">微信扫一扫<br>一分钱拼团</span>
    </div>
</div>

添加 css ,设置样式并将其隐藏 :

.izl-rmenu .pic{
  position: absolute;
  left: -136px;
  top: 0;
  height: 187px;
  display: none;
 }
.izl-rmenu .pic .pic_content{
  float: left;
  height: 187px;
  background-color: #fff;
  border: 1px solid #f5f5f5;
}
.izl-rmenu .pic .pic_content img{
  width: 100px;
  height: 100px;
  border: none;
  margin: 5px 14px;
}

使用 jQuery ，在 $(this).find(“.btn-sao”).mouseenter(function () { … } 代码块中添加鼠标经过时显示二维码的代码 :

1	$(this).find('.pic').fadeIn();

在 $(this).find(“.btn-sao”).mouseleave(function () { … } 代码块中添加鼠标移出时隐藏的代码 :

1	$(this).find('.pic').fadeOut();

来看下当前页面的效果 :
仿小米商城的侧边栏

现在还差最后一个「回到顶部」效果，这个使用 jQuery 也非常简单，只需在 $(‘#izl_rmenu’).each(function () { … } 代码块中添加如下代码 :

$(this).find(".btn-top").click(function(){
  $("html, body").animate({
      "scroll-top":0
  },"fast");
});

这样就能轻松实现回到顶部，但是一般的网站默认会吧「回到顶部」隐藏起来，只有当鼠标滚轮滚到一定高度后才显示按钮，这样的交互效果显然更符合用户需求。于是我们在将其优化一下，在全局 $(document).ready(function (){ … } 代码块里加上如下代码 :

 var lastRmenuStatus=false;
   $(window).scroll(function(){
       var _top=$(window).scrollTop();
       if(_top>200){
           $("#izl_rmenu").data("expanded",true);
       }else{
           $("#izl_rmenu").data("expanded",false);
       }
       if($("#izl_rmenu").data("expanded")!=lastRmenuStatus){
           lastRmenuStatus=$("#izl_rmenu").data("expanded");
           if(lastRmenuStatus){
               $("#izl_rmenu .btn-top").slideDown("fast");
           }else{
               $("#izl_rmenu .btn-top").slideUp("fast");
           }
       }
});

别忘了在 HTML 标签里加上 display: none 属性来使页面加载时默认隐藏按钮 :

1	<div class="btn btn-top" style="display: none"> ... </div>

好了，至此所有效果都有了，一个小米商城的右侧栏呈现在眼前 :

查看源码请移步 GitHub :jQuery制作小米商城侧边栏效果
喜欢就 star 一下吧。

JS学堂:小米商城右侧导航栏效果

感谢您的支持。