固定侧边栏滑出 canvas 导航

Question

有人问我如何使用 canvas 导航菜单制作滑出 Lanyon from the Poole series for Jekyll. I originally learned how to make an off canvas navigation from this Scotch.io tutorial，它使用 CSS3 变换。

我有两支笔：

这两支笔几乎一模一样。在第一个示例中，如果您找到 aside 并将位置更改为 fixed，它不会执行任何有用的操作。经过进一步调查，您似乎无法为已转换的元素设置固定位置。

所以，我只需要想出一些技巧来让它工作，我通过将所有内容设置为 position: absolute 并具有不同程度的 left，并在所有元素（导航图标、main、aside）。

然而，CSS3 过渡是平滑的，定位黑客是参差不齐的。在移动设备上尤为明显。

无论如何，我很好奇有什么更有效的方法来实现固定滑出侧边栏。

Answer 1

off-canvas 导航可以很容易地用一点 JQuery 和一些 CSS 来制作。在这个 DEMO 你可以看到。我不知道为什么在 JSFiddle 和 CODE SNIPPET 中我不能将 transform: translateX(290px); 放在右边 class （参见 CSS 的评论）但我在浏览器上测试了完整的代码并且它运行很好。我为 "good" UI 添加了一些 CSS，但如果您了解基本的 CSS，您可以轻松编辑它。希望对你有帮助。

编辑：

要在打开 NAV 时保持滚动条处于活动状态，您只需从 .m-nav-open class

中删除 overflow: hidden;

$(function(){  
 $(".m-nav-opener").click(function(){
  if ($("body").hasClass("m-nav-open")){
   $("body").removeClass("m-nav-open");
  } else {
   $("body").addClass("m-nav-open");
  }
 });
});

body {
    margin: 0px;
    min-height: 100%;
    -webkit-transition: all 0.8s ease 0s;
            transition: all 0.8s ease 0s;
    text-rendering: optimizespeed;
    width: 100%;
    -moz-text-size-adjust: none;
    max-width: 100%;
    height: 100%;
}
.m-nav-container {
  position: fixed;
  z-index: 1001;
  width: 290px;
  height: 100%;
  background: #2F2F2F;
  padding: 0px;
  font-size: 1.15em;
  box-sizing: border-box;
  top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  left: -290px;
  -webkit-transition: all 0.8s ease 0s;
          transition: all 0.8s ease 0s;
}
.m-nav-open {
  /*transform: translateX(290px); use this on your code*/
}
.m-nav-open .m-nav-container {
  -webkit-transform: translateX(290px);
      -ms-transform: translateX(290px);
          transform: translateX(290px); /* cancel this on your code*/
}
.nav-mobile {
  width: 100%;
}
.nav-mobile ul {
  list-style: outside none none;
  padding: 0px;
  margin:0px;
}
.nav-mobile li {
  display: block;
  border-radius: 0px;
  margin: 0px;
  border-top: 1px solid #292929;
  width: 100%;
  padding: 0px;
}
.nav-mobile li:last-child {
  border-bottom: 1px solid #292929;
}
.nav-mobile a {
  display: block;
  color: #919191;
  padding: 15px;
  text-decoration: none;
  border-radius: 0px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif, Helvetica;
  font-weight: 300;
  font-size: 1.0em;
}
.nav-mobile a:hover {
  color: #fff!important;
  background-color: #505050;
}
.m-nav-opener {
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  padding: 0px;
  cursor: pointer;
  left: 3%;
  top: 24px;
  position: absolute;
}
.m-nav-opener:hover {
  background: none;
  border: none;
  text-decoration: none;
  outline: none;
}
.m-nav-opener:focus {
  text-decoration: none;
  outline: none;
}
.m-nav-opener:active {
  background: none;
  border: none;
  color: #FFF;
  padding-top: 0px;
  padding-bottom: 0px;
}

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button class="m-nav-opener">OPEN</button>
<div class="m-nav-container">
<nav class="nav-mobile">
    <ul>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
    </ul>
</nav>
</div>
<p style="height:2000px;">Hi</p>
</body>
</html>

固定侧边栏滑出 canvas 导航

Fixed side bar with slide out off canvas navigation

html

css

navigation

jquery