Question

我正在共同构建一个website，我们希望在较少使用的菜单选项中使用非画布菜单。我们使用this script为汉堡菜单添加了一个很好的效果;效果很好！但是我们遇到了一个问题，当点击时，画布上的菜单会滑过按钮，所以我们希望按钮在单击时向左移动。不幸的是，使用margin-right: 600px定位.is-active类并不起作用。你们有什么想法吗？注意：滑动按钮位于导航栏（右上角）按钮中，该按钮名为“汉堡包菜单”＆＃39;暂时在菜单上工作，而隐藏另一个按钮。

按钮本身使用以下js，其中$("#wrapper").toggleClass("toggled");显示非画布菜单：

(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（切换）的末尾，它应该可以正常工作

将元素移动到左侧javascript / css

1 个答案: