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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.