Full-Screen Menu CSS3 & jQuery

Full-Screen Menu CSS3 & jQuery

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.

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


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.

See the Pen Full-Screen Menu Overlay by Ettrics (@ettrics) on CodePen.

to Source Post




+ There are no comments

Add yours