MenusLesson 20Free preview

Off-Canvas Menu

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Off-Canvas Menu (Off-Canvas Sidebar Push Content). Unlike a regular overlay that just overlaps the content, an off-canvas menu elegantly pushes the content of the homepage to the side when the sidebar is open.

Key points

Open the sidebar by changing the width of #mySidenav to 250px
Push main content by setting the left-margin #main to 250px
Apply CSS transitions to both elements to move in sync and synchronous motion
Can add a dark overlay effect to the content area being pushed

Full lesson

Code examples and quizzes

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