鼠标经过按钮上方 ，hover的时候，侧边栏向右滑出显示，且可点击（hover显示侧导航）

1. html代码示例：

结构要点： 要显示的**侧边栏是按钮的子级 **

  <div class="btn_slidebar">
    显示侧边栏
      <ul  class="test_slidebar">
        <li>分类1</li>
        <li>分类2</li>
        <li>分类3</li>
      </ul>
    </div>

2. css代码示例：

.btn_slidebar{ 
  width:100px;
  height: 40px;
  background: rgb(78, 194, 233);
  line-height: 40px;
  color:#fff;
  border-radius: 8px;
  box-shadow: 4px 2px 4px #808e8f;
  cursor: pointer;
}

.test_slidebar{
  width:150px;
  background: lightcoral;
  margin-top:20px;
  margin-left:-200px; /* 1. 初始，让侧边栏在屏幕外部 */
  transition: margin-left 0.5s; /* 2. 让margin-left有一个过渡效果,看实际情况，如果用了定位，也可以控制定位的left 值 */
}

.btn_slidebar:hover .test_slidebar{ /* */
  margin-left:0px; /* 3.  鼠标经过按钮的时候，让侧边栏回到原来的位置*/
}

鼠标移入后效果：