Submit your widget

jQuery full-screen menu and navigation

Created 3 years ago   Views 16922   downloads 3105    Author ettrics
 jQuery full-screen menu and navigation
View DemoDownload 8.2 KB
35
Share |

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.

Read more:http://ettrics.com/code/full-screen-menu-overlay/

Tag: navigation