Jquery 汉堡包菜单右边而不是左边

我在这里找到了一个很酷的脚本。它显示左侧有一个汉堡包图标，打开菜单时有一个圆圈，只覆盖了一半

现在我想使用这个效果，但在右边有图标/菜单。我有以下代码：

$function{ $.menu-link.ClickFunction{ e、 防止违约； $.menu-overlay.toggleClassopen； $.menu.toggleClassopen； }; }; 身体{ 背景：蓝色； } .菜单{ 位置：绝对位置； 右：20px； 顶部：20px； 高度：46px； 宽度：46px； } .菜单链接{ 宽度：100%； 身高：100%； 位置：绝对位置； z指数：1002； } .菜单图标{ 位置：绝对位置； 宽度：20px； 高度：14px； 保证金：自动； 左：0； 排名：0； 右：0； 底部：1px； } .菜单圈{ 背景色：fff； 宽度：100%； 身高：100%； 位置：绝对位置； 边界半径：50%； 变换：scale1； z指数：1000； 过渡：所有0.2秒缓进缓出； } .菜单覆盖{ 可见性：隐藏； 背景色：rgba255、146、44、9； 颜色：333； 身高：100%； 宽度：100%； 位置：固定； 排名：0； 右：0； 过渡：不透明度0.2s缓进缓出； z指数：1001； } .菜单覆盖a{ 颜色：fff； 字体大小：400； 字号：2em； 显示：内联块； } .菜单行{ 背景色：333； 高度：2倍； 宽度：100%； 边界半径：2px； 位置：绝对位置； 左：0； 过渡：所有0.5s立方贝塞尔0.19,1,0.22,1； } .menu-line-1{ 排名：0； } .menu-line-2{ 排名：0； 底部：0； 保证金：自动； } .menu-line-3{ 底部：0； } .菜单：悬停.菜单圈{ 转换：scale1.4； } .menu-overlay.open{ 不透明度：1； 能见度：可见； } .菜单.打开.菜单圈{ 变换：缩放60； } .menu.open.menu-line-2{ 不透明度：0； } .menu.open.menu-line-1{ 变换：translateY7px translateY-50%旋转-45度； } .menu.open.menu-line-3{ 变换：translateY-7px translateY 50%旋转45度； }

---

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

实际上，这可能有点过于简单。您可能不希望毛毯溢出：隐藏在您的身体上，因为这样您就无法滚动页面。此外，如果您的菜单链接不适合页面，您将无法滚动到它们，例如，在手机上

前一个问题可以通过在单击按钮打开导航的同时切换溢出来解决。下面是一个例子。后一个问题对您来说可能不是问题，但如果是，您可以通过将菜单包装在一个与页面一样大的元素中并滚动来解决它，但仍然存在正文溢出：隐藏，这样背景就不会滚动，菜单背景也不会超出页面宽度

$function{ $.menu-link.ClickFunction{ e、 防止违约； $body.toggleClassoverflow-hidden； $.menu-overlay.toggleClassopen； $.menu.toggleClassopen； }; }; 身体{ 背景：蓝色； } .溢出隐藏{ 溢出：隐藏； } .菜单{ 位置：绝对位置； 右：20px； 顶部：20px； 高度：46px； 宽度：46px； } .菜单链接{ 宽度：100%； 身高：100%； 位置：绝对位置； z指数：1002； } .菜单图标{ 位置：绝对位置； 宽度：20px； 高度：14px； 保证金：自动； 左：0； 排名：0； 右：0； 底部：1px； } .菜单圈{ 背景色：fff； 宽度：100%； 身高：100%； 位置：绝对位置； 边界半径：50%； 变换：scale1； z指数：1000； 过渡：所有0.2秒缓进缓出； } .菜单覆盖{ 可见性：隐藏； 背景色：rgba255、146、44、9； 颜色：333； 身高：100%； 宽度：100%； 位置：固定； 排名：0； 右：0； 过渡：不透明度0.2s缓进缓出； z指数：1001； } .菜单覆盖a{ 颜色：fff； 字体大小：400； 字号：2em； 显示：内联块； } .菜单行{ 背景色：333； 高度：2倍； 宽度：100%； 边界半径：2px； 位置：绝对位置； 左：0； 过渡：所有0.5s立方贝塞尔0.19,1,0.22,1； } .menu-line-1{ 排名：0； } .menu-line-2{ 排名：0； 底部：0； 保证金：自动； } .menu-line-3{ 底部：0； } .菜单：悬停.菜单圈{ 转换：scale1.4； } .menu-overlay.open{ 不透明度：1； 能见度：可见； } .菜单.打开.菜单圈{ 变换：缩放60； } .menu.open.menu-line-2{ 不透明度：0； } .menu.open.menu-line-1{ 变换：translateY7px translateY-50%旋转-45度； } .menu.open.menu-line-3{ 变换：translateY-7px translateY 50%旋转45度； }

---

HTML代码在哪里？见上文，但只是一个css问题..？谢谢！但是，在关闭菜单时播放动画时，无法不移动水平滚动条，对吗？浏览器issue@sigug啊，是的，在我的Mac滚动条上，只有在必要的时候才能看到，我甚至看不到任何事情发生，但我对这个问题很熟悉。你可以试着回答这个问题。最重要的答案是关于藏起来

---

垂直滚动条，但可能被调整为水平滚动条。除此之外，这在手机上也是一个问题。在任何情况下，我想你很快就会看到一个奇怪的完整页面，然后剪辑回来。但是谢谢。