MenusLesson 48Free preview

Collapsed Sidebar

This lesson is part of How To · All levels

Summary

A sidebar that can be scratched is a navigation panel on the side of a page that can be hidden when not in use. This pattern keeps the content area wide, especially on small screens. Usually the sidebar is pulled out of the screen with CSS, and then the menu button changes its class through JavaScript.

Key points

The sidebar is fixed and hidden with width: 0 or transform: translateX(-100%).
The toggle button adds or removes the class .open via classList.
The transition property makes open-closure movement feel smooth.
The overlay over the content makes it easy for the user to close the sidebar by clicking outside the panel.
The aria-expanded and aria-control attributes help the screen reader understand the menu status.

Full lesson

Code examples and quizzes

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