javascript - Canvas 外导航 : How to make a second-level menu slide in on top of first-level menu without covering body text?

Question

我的任务是制作一个包含主导航菜单的两层 Canvas 外导航菜单。每个“1 级”导航项都有一个带有内容的子导航弹出窗口。虽然我已经解决了大部分问题，但我对一个要求感到沮丧。该要求是能够使子导航弹出窗口从右侧“滑入”。

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

注意:您的浏览器视口(viewport)必须小于 979 像素，因为此菜单只能在较小的视口(viewport)中看到。

$(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，然后应用 display:当用户单击“Level 1 Sub-Nav”链接时阻止它，但这会取消 translateX() 动画。

那么，如何防止子导航覆盖正文并创建子导航滑入效果？

Answer 1

.masthead-flyout 正在其父级边界之外呈现，您可以将 overflow:hidden 添加到父级。我认为这是达到效果的最小改变。

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