將元素移到左邊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>

來源

2015-07-10 Raimond van Mouche

在這裏展示我們在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（切換）結束它上面應該工作

來源

2015-07-10 14:38:28

z-index對於開發很好，謝謝:)。正在嘗試長期解決方案，但每當我使用你的else語句時，javascript都會失敗。真奇怪，因爲我不明白爲什麼。有什麼想法嗎？（也是，我不得不添加一個）在真正之後得到正確的語法和工作） –

啊這是一個小的語法事物，'if'後面的'}'不在那裏。現在修復:) –

將元素移到左邊javascript/css

回答

相關問題