Question

我正在尝试为移动设备创建一个离线扫描菜单我设法让菜单滑出并滑动内容但是幻灯片效果似乎已关闭，因为当它滑入和滑出时会有间隙。

 

   function openNav() {
      $("#mySidenav").addClass('shifty-show').removeClass('shifty-hidden');
      $("#main").addClass('shifty-content').removeClass('main');
    }
function closeNav() {
  $("#mySidenav").removeClass('shifty-show').addClass('shifty-hidden');
  $("#main").removeClass('shifty-content').addClass('main');
}

.main {
  left: 0;
}
.shifty-hidden {
  left: -220px;
}
.shifty-show {
  left: 0;
  transition: 0.5s;
}
.shifty-content {
  transition: 0.5s;
  position: relative;
  left: 198px;
  top: 0;
}

Answer 1

编织：http://kodeweave.sourceforge.net/editor/#7439e1585a705f4a0033ccc54124cd89

You can actually do this is Pure CSS!

实际上非常简单。

你从一个复选框开始...

[pageViewController setViewControllers:@[UIViewController.new] direction:direction animated:true completion:nil];

这将是我们的菜单。

然后你使用一个标签，你给它一个for属性，它的值将是复选框的id。这样，当点击标签时，它将切换复选框。

<input id="menu" type="checkbox">

在这种情况下，我想在选中时移动标题。所以首先我要在它被检查之前确定它的位置。 <a href="javascript:void(0)"> <label class="fa fa-bars" for="menu"></label> </a> NOTE:是创建幻灯片动画的原因。

transition: all ease-in 300ms;

然后我告诉菜单，当它被检查以滑动标题时。

header {
  position: absolute;
  top: 7px;
  left: 0;
  transition: all ease-in 300ms;
}

就这么简单！我也添加了代码片段，以便您可以更多地使用它。

#menu:checked ~ header {
  left: 50%;
}

body {
  font: 15px arial;
  background: #545454;
}
a {
  text-decoration: none;
}
.pointer, a, label {
  cursor: pointer;
}
.fr {
  float: right;
}
header a {
  color: #000;
  font-size: 30px;
  padding: 0 0 0 12px;
}
header a:hover {
  color: #999;
}

.navbar a {
  color: #7c7c7c;
  text-decoration: underline;
}
.navbar a:hover {
  color: #b5b5b5;
}

/* The menubar */
input[type=checkbox],
#menu {
  display: none;
}
header {
  position: absolute;
  top: 7px;
  left: 0;
  transition: all ease-in 300ms;
}
.navbar {
  position: absolute;
  top: 0;
  left: -50%;
  right: 100%;
  padding: 1.04em;
  bottom: 0;
  color: #b2b2b2;
  background: #3f3f3f;
  transition: all ease-in 300ms;
  overflow: hidden;
}
#menu:checked ~ .navbar {
  left: 0;
  right: 50%;
}
#menu:checked ~ header {
  left: 50%;
}

Answer 2

更改.shifty-hidden类中左侧的值，如下所示：

.shifty-hidden{
   left: -198px;
}

希望有所帮助

创建一个非画布菜单Jquery

2 个答案: