从屏幕外滑入移动菜单 - 溢出问题 - Slide in mobile menu from off screen

鉴于以下简单的演示，我正在努力实现所需的行为，即我有一个使用 translateX 定位在屏幕外的菜单。

有几个问题 - 首先，如果我在正文上设置overflow: hidden，它会阻止菜单显示，而是在菜单打开时只显示空格。

如果我删除overflow: hidden，那么我会遇到一个问题，即由于 translateX 行为，用户可以滚动到正文宽度之外(例如，如果您打开菜单，然后在不使用菜单切换的情况下将正文滑动/移回原位(。

我还希望菜单在打开时可以滚动，但页面内容部分隐藏的其余部分固定在适当的位置。当菜单切换打开时，我已经在容器上设置了position: fixed，但它没有效果。

感谢任何帮助，因为我正在和这个兜圈子！

jQuery(document).ready(function($) {
  $('.mobile-menu-toggle').on('click', function(e) {
    e.preventDefault();
    $('body').toggleClass('mobile-menu-open');
  });
  // Close mobile menu if user clicks anywhere outside of the visible menu
  $(document).on('click touchstart', function(e) {
    if (!$(e.target).closest('.mobile-menu-toggle').length &&
      !$(e.target).closest('.main-menu-mobile').length) {
      if ($('body').hasClass('mobile-menu-open')) {
        $('body').removeClass('mobile-menu-open');
      }
    }
  });
});

*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
  min-height: 100%;
}
body {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  position: relative;
  overflow: hidden;
  margin: 0;
  transition-duration: 200ms;
  transform: translateX(0);
}
body.mobile-menu-open {
  transform: translateX(80%);
}
body.mobile-menu-open .container {
  position: fixed;
  overflow: hidden;
}
.header:before,
.header:after {
  content: " ";
  display: table;
}
.header {
  top: 0;
  /*transition: top 0.2s ease-in-out;*/
  /*transition: none;*/
  background: red;
}
.main-menu-mobile {
  background-color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  min-height: 100vh;
  transform: translateX(-100%);
  width: 80%;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header">
  <div class="mobile-nav">
    <a href="#" class="mobile-menu-toggle">Menu</a>
  </div>
  <ul class="main-menu-mobile">
    <li>
      <a href="/test">Test</a>
      <div class="dropdown">
        <div class="wrapper">
          <div class="menu-subcategory">
            <h4><a href="/sub">Sub Cat</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/test">Test 3</a>
              </li>
              <li>
                <a href="/test">Test 4</a>
              </li>
              <li>
                <a href="/test">Test 5</a>
              </li>
              <li>
                <a href="/test">Test 6</a>
              </li>
              <li>
                <a href="/test">Test 7</a>
              </li>
              <li>
                <a href="/test">Test 8</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="/test">Test 2</a>
      <div class="dropdown">
        <div class="wrapper">
          <div class="menu-subcategory">
            <h4><a href="/sub">Sub Cat</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
              <li class="view-all"><a href="/women/jackets">View All Jackets &gt;&gt;</a></li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="/test">Test 3</a>
    </li>
    <li>
      <a href="/test">Test 4</a>
    </li>
    <li>
      <a href="/test">Test 5</a>
    </li>
    <li>
      <a href="/test">Test 6</a>
    </li>
    <li>
      <a href="/test">Test 7</a>
    </li>
    <li>
      <a href="/test">Test 8</a>
    </li>
  </ul>
</header>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
</div>

因此，

一种方法是您可以将尝试操作的元素包装在容器中(您会在旧网站中看到很多这种情况，顶级称为"wrapper"(。我更新了您的代码片段，并清理了 CSS 以使其工作。

<div class="wrapper">
  <header></header>
  <div>blah</div>
  <div>blah</div>
</div>

https://jsfiddle.net/646tueyL/

我记得这种方法在您必须处理响应能力时会导致问题，可能有使用 JS 或重新考虑标记结构的更高级方法。

从屏幕外滑入移动菜单 - 溢出问题

相关内容

最新更新

热门标签：