画布外导航:如何在不覆盖正文的情况下，在一级菜单的顶部滑入二级菜单

Question

我的任务是制作一个具有主导航菜单的两级画布外导航菜单。每个"1级"导航项目都有一个包含内容的子导航弹出按钮。虽然我已经解决了大部分问题，但有一个要求让我很沮丧。该要求是能够使子导航弹出按钮从右侧"滑入"。

以下是我在JS Fiddle中的代码：http://jsfiddle.net/tangst/cca42qd6/
或者在代码之后运行嵌入的代码段。

注意：浏览器视口必须小于979px，因为此菜单只能在较小的视口中看到。

$(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"正文。这是不正确的行为。此"Level 1 Sub Nav"弹出按钮不应完全覆盖正文。它应该是看不见的。

当您单击"Level 1 Nav"链接时，您将看到子导航弹出按钮使用CSS transform translateX()属性向左滑动。在正确的情况下，子导航从正文的左边缘边界滑入；子导航一开始并没有掩盖正文。

我能做到这一点的唯一方法是在.masthead-flyout类上应用display: none，然后在用户单击"Level 1 Sub Nav"链接时对其应用display: block，但这会否定translateX()动画。

那么，我如何避免子导航覆盖正文并创建有效的子导航幻灯片呢？

Answer 1

如果.masthead-flyout在其父对象的边界之外呈现，则可以将overflow:hidden添加到父对象中。我认为这将是实现效果的最微小的改变。

    .masthead-nav-list {
        border: 1px solid #ccc;
        position: absolute;
        left: -9999px;
        overflow:hidden;/*add this*/
    }