A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.
The HTML is fairly simple, inside of the
<nav> element we have 2 halves, one for the brand logo, and the for our navigation. Inside the brand side you can place a graphic, and inside the navigation side goes your standard unordered list of links.
In our CSS we hide both sides of the navigation using CSS transforms. The transform property is the most performant property to animate as it doesn’t trigger reflows or repaints in the DOM. We
translateY(-100%) the right side of the menu, and