分析小米商城左侧菜单的布局和效果实现

小米左侧菜单如图：

也就是说，在没有点击左侧菜单的时候，背景是一个轮播图，一旦点击了左侧菜单，或者说鼠标在左侧菜单上滑动，那么就会触发左侧菜单的动画演示，这次就是来分析动画演示的具体是怎么实现的，以及他是怎么布局的。

首先在这个区域，可以看见是有两个部分组成，分别是轮播图和左侧的开始菜单，但是你可以看见因为这两个是重叠在一起的，因此可以知道 轮播图 肯定是使用了 position：absolute 来进行定位的，至于左侧开始菜单，也可以使用position：absolute来定位，但是也可以不用，因此优先选择不用。又因为左侧开始菜单是在上层，左侧菜单有没有使用定位，而轮播图使用了定位，并且又在下层，因此可以知道轮播图的 z-index属性值 必须是负数，可以是 -1，暂时综合以上分析，布局如下：

（为了方便，把必要样式写在标签内部了）

<div class="container">position：relative

<div class="slide&