A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.

Our full-screen menu is built using HTML, CSS, and JavaScript. The HTML defines the structure, the CSS is used for animation, and JavaScript triggers the animations.

Structure

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.

Styling

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 translateY(100%) the left side of the menu. Next, setup an “active” class for both of these elements that reset their transform properties back to 0. These classes are added on a click event with JavaScript.

Events

Our JavaScript makes use of the native ClassList API allowing us to add and remove classes when we like. We have some basic on click events that are triggered when the hamburger menu is clicked. Checkout the code to see which classes are being added and removed. The end result is a cool full-screen menu that’s visually pleasing and easy to use.