从左向右滑动 div答案

【问题标题】：Slide Div Left to Right从左向右滑动 div
【发布时间】：2014-03-20 19:59:47
【问题描述】：

当有人单击菜单按钮时，我想将 div 从左向右滑动。我的网站在页面左侧有菜单。我想当有人点击我菜单上的任何按钮时，它会在页面上显示 div 但不像灯箱。顺便说一句，对不起我的英语。我正在寻求帮助

【问题讨论】：

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

标签： jquery slide

【解决方案1】：

你可以使用sidr，这是一个jquery插件来实现菜单。

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

一个非常快速和简单的实现可以是这样的。（我打算展示方法。一个使用 jQuery Slide 效果，第二个使用 CSS3 translation。）

为了更好地理解功能，您可以参考JSFiddle here

HTML 代码

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

Javascript 代码。

$('#leftSideBar').hide();
$("#leftSideMenuIcon").on('click', function() {
  $("#leftSideMenuIcon").toggleClass("active");
  $('#leftSideBar').toggle("slide", {
    "direction": "left",
    "distance": "200px"
  }, "fast");
  $("#leftSideMenuIcon").toggleClass("pushObjectsForSidebar");
});

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);
}

【讨论】：