畫布外導航：如何在不覆蓋正文的情況下在第一級菜單頂部制作第二級菜單幻燈片？

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*/
    }