创建画布菜单Jquery

Question

我正在尝试为移动设备创建offcanvas菜单，设法使菜单滑出并滑出内容，但是由于滑入和滑出之间存在间隙，滑动效果似乎消失了。

https://jsfiddle.net/tg7L44wo/

 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

您实际上可以做到的就是Pure CSS！

实际上非常简单。

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

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

这将是我们的菜单。

然后使用标签，并为其提供for属性，该属性的值将为复选框的ID。 这样，当单击标签时，它将切换复选框。

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

 <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> <input id="menu" type="checkbox"> <header> <a href="javascript:void(0)"> <label class="fa fa-bars" for="menu"></label> </a> <a href="javascript:void(0)"> <i class="fa fa-book"></i> </a> </header> <div class="navbar"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel nihil sed, fuga, ad natus magni beatae! Velit, ducimus unde quis necessitatibus, veniam cum fuga libero neque, fugit dolorem, id! </p> <a href="javascript:void(0)" class="fr"> <label for="menu">Close</label> </a> </div> 

Answer 2

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

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

希望能有所帮助