One of the most common patterns in web design is a navbar with a multi-level dropdown menu. While this is relatively simple to create, it’s still problematic for many developers—especially in a CSS-only version.
Welcome to the next in our series of tutorials where we use the general sibling combinator
~ to create various components for the web. This tutorial will cover navigation elements using links and radio inputs.
The off-canvas pattern is a classic approach to responsive navigation. When the viewport is small enough to warrant it, bulky navigation is hidden “off-canvas” and only brought into view when toggled.