javascript - 将元素移到左侧 javascript/css

Question

我正在共同构建一个 website我们想为较少使用的菜单选项使用 Canvas 外菜单。我们使用了 this script为汉堡菜单添加漂亮的效果；效果很好!但是我们有一个问题，点击时 Canvas 外菜单会滑过按钮，所以我们希望按钮在点击时向左移动。不幸的是，使用 margin-right: 600px 定位 .is-active 类不起作用。你们有什么想法吗？ 注意:滑过的按钮位于导航栏(右上角)中，名为“汉堡菜单”的按钮是临时在菜单上工作的，而另一个按钮是隐藏的。

---

按钮本身使用以下js 其中$("#wrapper").toggleClass("toggled");使 Canvas 外菜单显示:

(function() {

"use strict";

var toggles = document.querySelectorAll(".c-hamburger");

for (var i = toggles.length - 1; i >= 0; i--) {
  var toggle = toggles[i];
  toggleHandler(toggle);
};

function toggleHandler(toggle) {
  toggle.addEventListener( "click", function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");

  });
}

 })();

点击按钮后运行: <button class="c-hamburger c-hamburger--htx pull-right"><span>toggle menu</span></button>

Answer 1

对于快速而肮脏的临时解决方案，您可以通过将以下 css 应用于汉堡包图标，使汉堡包图标出现在菜单顶部

z-index: 2000

对于长期解决方案，一种方法是添加 javascript 以在切换菜单时为图标设置动画。您可以使用 jquery animate() 命令:

if (this.classList.contains("is-active") === true) {
    $('.c-hamburger').animate({right: '0px'});
else {
    $('.c-hamburger').animate({right: '200px'});
}

如果你将它添加到上面的函数 toggleHandler(toggle) 的末尾，它应该可以工作