汉堡菜单右边而不是左边

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>

(也在JSFiddle上。(

它或多或少可以工作，但整个覆盖现在正在使视口变大(您可以向右滚动并看到完整的圆形背景(。有办法解决这个问题吗？或者这是不可能的"；脚本"；？

Answer 1

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

在实践中，这可能有点过于简单化了。你可能不想在你的body上放一条毯子overflow: hidden，因为那样你就无法滚动页面了。此外，如果你的菜单链接不适合页面，你将无法滚动到它们(比如在手机上(。

前一个问题可以通过在单击按钮打开导航的同时切换溢出来解决。下面是一个例子。后一个问题对你来说可能不是问题，但如果是，你可以通过将菜单包装在与页面一样大的元素中并滚动来解决它，但body仍然是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);
}

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