MenusLesson 17Free preview

Side Navigation

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of an Interactive Side Navigation (Sidenav) that can be opened and closed using JavaScript sliding animation. When the menu button is clicked, the width of the sidebar smoothly transitions from 0 to 250px (or covers the entire screen), complete with the closing cross button (X).

Key points

Sidenav is set to width: 0 and overflow-x: hidden by default
The openNav() function sets style.width to '250px' through JavaScript
The closeNav() function returns style.width to '0'
Apply CSS transition: 0.5s to the width property for smooth opening animation

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.