问题：

非画布导航：如何使一个二级菜单滑到第一级菜单的顶部而不覆盖正文文本？

鲁城

2023-03-14

我的任务是使一个两级离帆布导航菜单，有主导航菜单。每个“第1级”导航项目都有一个包含内容的子导航飞出。虽然我已经解决了大部分问题，但有一个要求让我感到沮丧。该要求是能够使副导航从右侧飞出“滑入”。

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

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

null

$(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>

null

点击“Hamburger”图标，“LOREM IPSUM”正文文本将向右移动（这是所希望的行为）。然后，你会看到带有灰色边框的“1级导航”。此外，您还会看到带有红色边框的“Level 1 Sub-Nav”div。“Level 1 sub-nav”飞出覆盖了“LOREM IPSUM”正文。那是不正确的行为。这个“1级副导航”的飞出不应该完全掩盖正文。应该是隐形的。

当您单击“Level 1 NAV”链接时，您将看到使用CSS transformTranslateX()属性将子NAV弹出滑到左侧。在正确的情况下，子导航从正文的左边缘边界滑入；子导航一开始并不掩盖正文。

我能够使此工作的唯一方法是在.masthead-flyout类上应用display:none，然后在用户单击“Level 1 sub-nav”链接时对其应用display:block，但这会否定translatex()动画。

那么，我如何保持子导航不掩盖正文文本，并创建子导航滑入效果呢？

南宫森

2023-03-14

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

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

非画布导航：如何使一个二级菜单滑到第一级菜单的顶部而不覆盖正文文本？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档