将元素移到左边javascript/css

问题描述：

我正在共同构建一个website，我们希望为较少使用的菜单选项使用非画布式菜单。我们使用this script为汉堡菜单添加了一个不错的效果;效果很好！但是我们遇到了一个问题，单击时画布外菜单滑过按钮，因此我们希望按钮在单击时向左移动。不幸的是，以margin-right: 600px为目标的.is-active类不起作用。你们有什么想法吗？ 注意：滑过的按钮位于导航栏中（右上角），名为“汉堡包菜单”的按钮是暂时在菜单上工作，而另一个按钮处于隐藏状态。将元素移到左边javascript/css

按钮本身使用以下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>

在这里展示我们在SO一些代码，不只是使用链接 – depperm

代码远远胜过单词，它有帮助。这里有一些代码 – Jayababu

希望这有助于:) –

答

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

z-index: 2000

对于更长期的解决方案，一种方法是添加javascript以在菜单切换时为图标添加动画。你可以使用jQuery的动画（）命令：

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

如果您添加到您的函数toggleHandler（切换）结束它上面应该工作

z-index对于开发很好，谢谢:)。正在尝试长期解决方案，但每当我使用你的else语句时，javascript都会失败。真奇怪，因为我不明白为什么。有什么想法吗？（也是，我不得不添加一个）在真正之后得到正确的语法和工作） –

啊这是一个小的语法事物，'if'后面的'}'不在那里。现在修复:) –

将元素移到左边javascript/css

相关推荐