Question

我在https://www.jqueryscript.net/demo/Expanding-Fullscreen-Hamburger-Menu-With-jQuery-CSS3/找到了一个不错的脚本。它显示在左侧带有一个汉堡图标，并打开一个带有圆圈的菜单，只有一半被覆盖。

现在，我想使用此效果，但是右侧有图标/菜单。我有以下代码：

$(function() {
  $(".menu-link").click(function(e) {
    e.preventDefault();
  $(".menu-overlay").toggleClass("open");
  $(".menu").toggleClass("open");
  });
});

body {
  background: blue;
}

.menu {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

.menu-circle {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

.menu-overlay {
  visibility: hidden;
  background-color: rgba(255, 146, 44, .9);
  color: #333;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
}

.menu-overlay a {
  color: #fff;
  font-weight: 400;
  font-size: 2em;
  display: inline-block;
}

.menu-line {
  background-color: #333;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-line-1 {
  top: 0;
}

.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-3 {
  bottom: 0;
}

.menu:hover .menu-circle {
  transform: scale(1.4);
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.menu.open .menu-circle {
  transform: scale(60);
}

.menu.open .menu-line-2 {
  opacity: 0;
}

.menu.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}

.menu.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <span class="menu-circle"></span>
  <a href="#" class="menu-link">
    <span class="menu-icon">
            <span class="menu-line menu-line-1"></span>
    <span class="menu-line menu-line-2"></span>
    <span class="menu-line menu-line-3"></span>
    </span>
  </a>
</div>
<div class="menu-overlay">
  <ul>
    <li><a href="#">Platzhalter</a></li>
    <li><a href="#">Platzhalter</a></li>
    <li><a href="#">Platzhalter</a></li>
  </ul>
</div>

（Also on JSFiddle。）

它或多或少地起作用，但是整个叠加层现在正在使视口变大（您可以向右滚动并查看带有圆圈的完整背景）。有办法解决吗？还是用这个“脚本”不可能？

Answer 1

如果您检查jQuery页面，则在控制台中可以看到它们在overflow: hidden标签上带有body。将其添加到您的代码即可解决问题：

在实践中，这可能有点过于简单。您可能不希望在overflow: hidden上铺上毯子body，因为那样便无法滚动页面。另外，如果您的菜单链接不适合页面，您将无法滚动找到它们（例如，在移动设备上）。

您可以通过在单击按钮同时打开导航按钮的同时切换溢出来解决前一个问题。下面是一个例子。后一个问题对您来说可能不是问题，但如果是这样，您可以通过将菜单包装在与页面和滚动一样大的元素中来解决，但仍将body设为{{1} }，因此背景不会滚动，菜单背景也不会超出页面宽度。

overflow: hidden

$(function() {
  $(".menu-link").click(function(e) {
    e.preventDefault();
  $("body").toggleClass("overflow-hidden");
  $(".menu-overlay").toggleClass("open");
  $(".menu").toggleClass("open");
  });
});

body {
  background: blue;
}

.overflow-hidden {
  overflow: hidden;
}

.menu {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

.menu-circle {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

.menu-overlay {
  visibility: hidden;
  background-color: rgba(255, 146, 44, .9);
  color: #333;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
}

.menu-overlay a {
  color: #fff;
  font-weight: 400;
  font-size: 2em;
  display: inline-block;
}

.menu-line {
  background-color: #333;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-line-1 {
  top: 0;
}

.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-3 {
  bottom: 0;
}

.menu:hover .menu-circle {
  transform: scale(1.4);
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.menu.open .menu-circle {
  transform: scale(60);
}

.menu.open .menu-line-2 {
  opacity: 0;
}

.menu.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}

.menu.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

汉堡菜单向右而不是向左

1 个答案: