有人问我如何从Joleyll的Poole系列中滑出画布导航菜单la Lanyon。我最初学习了如何从使用CSS3变换的this Scotch.io tutorial进行画布导航。
我有两支钢笔：
这两支笔几乎完全相同。在第一个示例中，如果您找到aside并将位置更改为fixed，则它不会执行任何有用的操作。经过进一步调查，您似乎无法为已转换的元素设置固定位置。
所以，我只需要弄清楚某种方法可以使它工作，我通过将所有内容设置为position: absolute并使用不同程度的left，并在所有元素上设置转换（导航图标，main，aside）。
然而，在CSS3过渡平稳的情况下，定位黑客是锯齿状的。它在手机上特别引人注目。
无论如何，我很好奇是什么更有效的方法来实现固定的滑出侧边栏。
答案 0 :(得分：1)
transform: translateX(290px);放到正确的类（请参阅CSS的注释），但我在浏览器上测试完整代码并且运行得很好。我为一个好的＆＃34;添加了一些CSS。用户界面，但如果您了解基本的CSS，则可以轻松编辑它。我希望能帮到你。
修改
为了在NAV打开时保持滚动状态，您只需从overflow: hidden;类
.m-nav-open
$(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>