How would I go about making this menu slide in on hamburger menu click? The background of it is an SVG and not an actual shape.
https://codepen.io/KirbStarRulz/pen/GdzOyM
$(document).ready(function() {
$('.hamburger-container').on('click', function(e) {
e.preventDefault();
$('.hideMenu').toggleClass('slideInMenu');
});
});
function myFunction(x) {
x.classList.toggle("change");
}
Here's an image of what I need slid in (orange trapezoid on the right) https://ibb.co/nRrr1T
Thanks!
If I understand correctly you want to slide in navigation. Your code works fine the only problem is negative z-index because of it your navigation is below all other elements.
.hideMenu {
background-image: url(images/kreativez_menu_bg.svg);
width: 48%;
height: 100%;
background-size: cover;
position: fixed;
transform: translateX(200%);
z-index: 100;
top: 0;
left: 0;
transition: transform 0.5s linear;
}
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.