MenusLesson 49Free preview
Collapsed Sidepanel
This lesson is part of How To · All levels
Summary
A side panel is a panel that slides from the side of the screen and covers some of the content, rather than shifting the page layout. Panels like this are great for extra menus, product details, or quick settings. The open-close controls are similar to sidebars, but the position and appearance of the layers need to be taken into account so as not to collide with other elements.
Key points
- The sidepanel generally appears from the right and covers the content with position: fixed.
- Transform: translateX(100%) hides the panel outside the right edge.
- The z-index ensures that the panel is above the content and overlay.
- The Escape button can be installed as a shortcut to close the panel.
- Transitions should only animate transform or opacity to stay smooth.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.