使導航菜單滑入

Question

我如何才能使此菜單在漢堡菜單單擊中滑入？ 它的背景是SVG，而不是實際形狀。

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

這是我需要滑入的圖像（右側的橙色梯形） https://ibb.co/nRrr1T

謝謝！

Answer 1

如果我理解正確，則想在導航中滑動。 您的代碼運行良好，唯一的問題是負z-index，因為它的導航位於所有其他元素之下。

.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;
}