Jquery 从左向右滑动Div

当有人单击菜单按钮时，我想将div从左向右滑动。我的网站在页面的左侧有菜单。我想当有人点击我菜单上的任何按钮时，它会在页面上显示为div，但不像灯箱。对了，我的英语很抱歉。我正在寻找您可以使用的帮助，这是一个jquery插件，用于实现菜单

或者您可以使用CSS3翻译属性或jquery自己实现它

一个非常快速和简单的实现可以是这样的（我打算展示一些方法。一个使用jQuery

幻灯片

效果，另一个使用CSS3

翻译

）

为了更好地理解您可以参考的功能

HTML代码

<div id="leftSideBar"></div>
<div id="leftSideMenuIcon"></div>

CSS

#leftSideMenuIcon {
  height: 20px;
  width: 20px;
  top: 0;
  position: fixed;
  background-color: red;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
}

#leftSideBar {
  height: 200px;
  width: 200px;
  background-color: green;
  top: 0;
  position: fixed;
}

.pushObjectsForSidebar {
  -webkit-transform: translate(200px,0px);
  -ms-transform: translate(200px,0px);
  -o-transform: translate(200px,0px);
  -moz-transform: translate(200px,0px);
  transform: translate(200px,0px);
}

---

欢迎来到StackOverflow。请阅读并扩展您的问题。

#leftSideMenuIcon {
  height: 20px;
  width: 20px;
  top: 0;
  position: fixed;
  background-color: red;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
}

#leftSideBar {
  height: 200px;
  width: 200px;
  background-color: green;
  top: 0;
  position: fixed;
}

.pushObjectsForSidebar {
  -webkit-transform: translate(200px,0px);
  -ms-transform: translate(200px,0px);
  -o-transform: translate(200px,0px);
  -moz-transform: translate(200px,0px);
  transform: translate(200px,0px);
}