I am struggling with the menu animation on my website. Currently, the menu slides in from the left side and covers 30% of the screen. I want to change it so that it slides in from the right and sticks to the right side of the screen. I've attempted to modify the CSS property "left:-150%" to "right:-150px" but it didn't work as expected; instead, the menu just fades in at its current position.
Furthermore, I am also looking to disable page scrolling when the menu is open. Any help would be greatly appreciated!
jQuery(document).ready(function($){
$('.btn-open-menu').click(function () {
$('header').addClass('open');
});
$('.link-menu').click(function () {
$('header').removeClass('open');
});
$('.btn-close-menu').click(function () {
$('header').removeClass('open');
});
}); html, body {
width: 100%;
height: 100%;
// CSS properties other than the snippet provided are removed for brevity
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<a class="btn-open-menu">
<span class="hamburguer"><img src="/wp-content/uploads/2020/08/hamburger.png"</span>
</a>
<div class="header-content">
<a class="btn-close-menu"></a>
<nav>
<div class="Menu">
<ul class="Menu-list" data-offset="10">
<li class="Menu-list-item" data-offset="20" onclick="location.href='/home';">
Home
<span class="Mask"><span>Home</span></span>
<span class="Mask"><span>Home</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick="location.href='/about';">
About
<span class="Mask"><span>About</span></span>
<span class="Mask"><span>About</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick="location.href='/contact';">
Contact
<span class="Mask"><span>Contact</span></span>
<span class="Mask"><span>Contact</span></span>
</li>
</ul>
</div>
</nav>
<div class="social">
<a href="https://www.instagram.com/jvaleskasilva/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.facebook.com/jvaleskasilva" target="_blank">
<i class="fab fa-facebook-f"></i></i>
</a>
</div>
</div>
</header>