有人问我如何在 Jekyll 的 Poole 系列中制作一个滑出画布导航菜单的 Lanyon。我最初从this Scotch.io tutorial 学习了如何制作一个画布外导航，它使用 CSS3 转换。
我有两支笔：
两支笔几乎一模一样。在第一个示例中，如果您找到aside 并将位置更改为fixed，它不会做任何有用的事情。经过进一步调查，您似乎无法为已转换的元素设置固定位置。
所以，我只需要想出一些技巧来使它工作，我通过将所有内容设置为 position: absolute 和不同程度的 left，并在所有元素上放置过渡（导航图标， main、aside)。
但是，在 CSS3 过渡平滑的地方，定位技巧是锯齿状的。在移动设备上尤其明显。
无论如何，我很好奇实现固定滑出侧边栏的更有效方法是什么。
【问题讨论】：
标签： jquery html css navigation
使用一点 JQuery 和一些 CSS 就可以轻松制作非画布导航。
在这个DEMO 你可以看到。
我不知道为什么在 JSFiddle 和 CODE SNIPPET 中我不能将 transform: translateX(290px); 放到正确的类中（参见 CSS 的 cmets），但我在浏览器上测试了完整的代码，它运行得很好。我为“好的” UI 添加了一些 CSS，但如果您了解基本 CSS，则可以轻松编辑它。希望对你有帮助。
编辑：
为了在 NAV 打开时保持滚动活动，您只需从 .m-nav-open 类中删除 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>【讨论】：
<p style="height:2000px;">Hi</p> 当您单击打开导航时，它会禁用滚动。我试图阻止这种情况。你有什么建议吗？