Question

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

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

从左到右滑动Div

1 个答案: