To create a hamburger menu that slides in from the right when clicking the icon, follow this code snippet.
Here is the main menu code where it is initially translated to the right by 100% and on icon click, it comes back on screen with a translation of 0%.
HTML
<div id="mobilenav" class="mobile-nav">
<div class="mobile-nav-header">
</div>
<div class="hamburger">
<button (click)="closeMenu()">
<img src="../../assets/icons/close-menu.svg" alt="" />
</button>
</div>
</div>
<ul class="links">
</ul>
<div class="socials">
</div>
</div>
.mobile-nav {
height: 100vh;
top: 0;
position: absolute;
transform: translateX(100%);
right: 0;
transition: 0.5s;
background: white;
z-index: 99;
}
Javascript Code
openMenu() {
var mobile_menu = document.getElementById('mobilenav');
mobile_menu!.style.transform = 'translateY(0px)';
// mobile_menu!.style.display = 'block';
}
closeMenu() {
var mobile_menu = document.getElementById('mobilenav');
mobile_menu!.style.transform = 'translateX(100%)';
// mobile_menu!.style.display = 'none';
}
The challenge lies in preventing horizontal scrolling while the menu is closed. The goal is to hide the menu completely without enabling any horizontal scroll option for the user.