我的任务是创建一个具有主导航菜单的两级离线导航菜单。每个“1级”导航项都有一个子导航弹出按钮，其中包含内容。虽然我已经完成了大部分工作，但我对一项要求感到沮丧。该要求是能够使子导航弹出窗口从右侧“滑入”。
这是我在JS Fiddle的代码：http://jsfiddle.net/tangst/cca42qd6/
或者在代码之后运行嵌入式代码段。
注意：您的浏览器视口必须小于979像素，因为此菜单仅在较小的视口中显示。
$(document).ready(function () {
$(".masthead-nav-burgericon").on("click", function (event) {
$(".masthead-nav-burgericon").toggleClass("open");
$("body").toggleClass("is-offcanvas");
$(".masthead-nav-list").addClass("is-visible");
event.preventDefault();
});
$(".masthead-channel-link").on("click", function (event) {
var $mastheadFlyout = $(this).parent(".masthead-nav-channel").children(".masthead-flyout"),
$mastheadNav = $(".masthead-nav-list");
if ($mastheadFlyout.hasClass("is-visible")) {
$mastheadFlyout.removeClass("is-visible");
$mastheadNav.removeClass("is-covered");
} else {
$mastheadFlyout.addClass("is-visible");
$mastheadNav.addClass("is-covered");
}
event.preventDefault();
});
});/* Micro clearfix */
.cf:before, .cf:after {
content:" ";
display: table;
}
.cf:after {
clear: both;
}
.masthead-wrapper {
position: relative;
}
.masthead-wrapper * {
box-sizing: border-box;
}
#masthead .masthead-wrapper ul, .masthead-wrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 979px) {
/* BEGIN - Off-canvas styles */
body {
left: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
transition: transform 500ms ease;
}
body.is-offcanvas {
left: 0;
overflow-x: hidden;
-webkit-transform: translateX(70%);
-moz-transform: translateX(70%);
-ms-transform: translateX(70%);
transform: translateX(70%);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
transition: transform 500ms ease;
}
.masthead-nav-list {
border: 1px solid #ccc;
position: absolute;
left: -9999px;
}
.masthead-nav-list.is-visible {
height: 500px;
left: -250px;
top: 0;
width: 250px;
}
.masthead-nav-list.is-covered {
}
/* END - Off-canvas styles */
.masthead-flyout {
border: 1px solid #f00;
background-color: #ffffff;
height: 1000px;
left: 100%;
position: absolute;
top: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
transition: transform 500ms ease;
width: 200px;
}
.masthead-flyout.is-visible {
overflow-x: hidden;
overflow-y: auto;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
transition: transform 500ms ease;
}
/* This does not flex because it's a small, fixed icon */
.masthead-nav-burgericon-wrapper {
width: 50px;
}
.masthead-nav-burgericon {
width: 50px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.masthead-nav-burgericon span {
background: #000000;
border-radius: 2px;
height: 5px;
left: 5px;
opacity: 1;
position: absolute;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
transition: .25s ease-in-out;
width: 25px;
}
.masthead-nav-burgericon span:nth-child(1) {
top: 2px;
}
.masthead-nav-burgericon span:nth-child(2) {
top: 12px;
}
.masthead-nav-burgericon span:nth-child(3) {
top: 22px;
}
.masthead-nav-mobile-sitelogo-wrapper .masthead-nav-burgericon span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.masthead-nav-mobile-sitelogo-wrapper .masthead-nav-burgericon span:nth-child(2) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<div>
<header id="masthead" class="masthead-wrapper">
<nav class="masthead-nav">
<div class="masthead-nav-burgericon-wrapper">
<div class="masthead-nav-burgericon"> <span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="masthead-nav-list">
<li class="masthead-nav-mobile-sitelogo-wrapper">
<div class="masthead-nav-closeicon">
<div class="masthead-nav-burgericon"> <span></span>
<span></span>
</div>
</div>
</li>
<li class="masthead-nav-channel masthead-channel-az"> <a href="#" class="masthead-channel-link">Level 1 Nav</a>
<div class="masthead-flyout masthead-flyout-nav">
<div class="masthead-flyout-col">
<div class="masthead-conditions-wrapper cf">
<div class="masthead-conditions-header-wrapper cf">Level 1 Sub-Nav (Contents): This should be hidden until you click the "Nav" link. This sub-nav should not be covering the main content (Lorem Ipsum) below.</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</header>
</div>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
点击“汉堡包”图标，“Lorem Ipsum”正文将向右移动（这是所需的行为）。然后，您将看到带有灰色边框的“Level 1 Nav”。此外，您将看到带有红色边框的“Level 1 Sub-Nav”div。 “Level 1 Sub-Nav”弹出窗口覆盖了“lorem ipsum”正文。这不是正确的行为。这个“1级子导航”弹出窗口根本不应该覆盖正文。它应该是隐形的。
当您单击“Level 1 Nav”链接时，您将看到使用CSS转换translateX()属性将子导航弹出窗口向左滑动。在正确的情况下，子导航从正文文本的左边界滑入;子导航不会掩盖正文开头。
我能够完成这项工作的唯一方法是在display: none课程上应用.masthead-flyout，然后在用户点击“等级1”时应用display: block Sub-Nav“链接，但这会否定translateX()动画。
那么，我如何防止子导航掩盖正文并创建子导航滑入效果？
答案 0 :(得分：1)
.masthead-flyout正在其父级边界之外呈现，您可以将overflow:hidden添加到父级。我认为这将是实现这种效果的最小变化。
.masthead-nav-list {
border: 1px solid #ccc;
position: absolute;
left: -9999px;
overflow:hidden;/*add this*/
}