【发布时间】：2018-07-11 11:13:35
【问题描述】：
我创建了一个运行良好的简单的画布外菜单。
$("#menu2").click(function() {
$("#menu2").toggleClass("active");
$("#off-canvas-right").toggleClass("active");
$(".content").toggleClass("slide-left");
});
$(document).on('click', function(event) {
if (!$(event.target).closest('#menu1').length) {
$(".content").removeClass("slide-right");
}
if (!$(event.target).closest('#menu2').length) {
$("#menu2").removeClass("active");
$("#off-canvas-right").removeClass("active");
$(".content").removeClass("slide-left");
}
});.content {
position: absolute;
transition: margin 0.5s ease-in-out;
padding-left: 30%;
}
.content p {
font-size: 42px;
}
body {
overflow-x: hidden;
position: relative;
}
#off-canvas-left,
#off-canvas-right {
position: absolute;
width: 30em;
}
#off-canvas-left {
transition: left 0.5s ease-in-out;
left: -30em;
}
#off-canvas-right {
transition: right 0.5s ease-in-out;
right: -30em;
}
#off-canvas-left.active {
transition: left 0.5s ease-in-out;
left: 0;
}
#off-canvas-right.active {
transition: right 0.5s ease-in-out;
right: 0;
}
.content.slide-right {
transition: margin 0.5s ease-in-out;
margin-left: 30em;
margin-right: -30em;
}
.content.slide-left {
transition: margin 0.5s ease-in-out;
margin-right: 30em;
margin-left: -30em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='menu2'>menu2</a>
<div class="content">
<p>PAGE TEXT HERE</p>
</div>
<nav id="off-canvas-right">
<ul>
<li><a href="#">Stream</a></li>
<li><a href="#">Lab</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>如果您切换 menu-2，您可以看到关闭画布菜单被推送到页面中，这很好。
但是，这会导致部分页面文本被推到页面之外。无论我的画布外菜单被推到页面多远，我都需要页面文本留在视口中。
基本上，文本会响应菜单宽度并相应地调整大小。
如果有人能指出实现这一目标的方向，将不胜感激！
【问题讨论】：
-
这没什么区别。