画布外导航：如何在不覆盖正文的情况下在第一级菜单顶部制作第二级菜单幻灯片？

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”正文文本将向右移动（这是所需的行为）。 然后，您会看到带有灰色边框的“一级导航”。 此外，您会看到带有红色边框的“一级子导航” div。 “ Level 1 Sub-Nav”弹出菜单涵盖了“ lorem ipsum”正文。 那不是正确的行为。 此“级别1子导航”弹出按钮根本不应掩盖正文。 它应该是不可见的。

当您单击“级别1导航”链接时，您将看到使用CSS转换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*/
    }