将元素移到左侧javascript / css

Question

I'm co-building a website where we want to use a off-canvas menu for the lesser used menu options. We used this script to add a nice effect to the hamburger menu; works well! But we have a problem, the off-canvas menu slides over the button when clicked so we want the button to move to the left when clicked. Unfortunately targeting the .is-active class with a margin-right: 600px doesn't work. Do you guys have any idea? Note: The button that get's slide over is in the navbar (top-right) the button called 'hamburger menu' is temporary to work on the menu while the other button is hidden.

---

The button itself uses the following js in which $("#wrapper").toggleClass("toggled"); makes the off-canvas menu show:

(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");

  });
}

 })();

Which runs after clicking on the button: <button class="c-hamburger c-hamburger--htx pull-right"><span>toggle menu</span></button>

Answer 1

For a quick and dirty temporary solution, you could make the hamburger icon appear on top of the menu by applying the below css to the hamburger icon

z-index: 2000

For a longer term solution, one way would be to add javascript to animate the icon over when the menu is toggled. You could use the jquery animate() command:

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

If you add that to the end of your function toggleHandler(toggle) above it should work