Is it possible to create an off-canvas menu without JavaScript?

You can create an off-canvas menu without JavaScript by using a clever combination of pseudo-classes and sibling combinators. A simple HTML checkbox is used to affect the navigation status.

In addition to reducing JavaScript, which often leads to improved loading time, this also optimises accessibility as a checkbox can be controlled in all browsers using the keyboard and mouse clicks and can be read well using screen readers.

The sibling combinators “+” and “~” are often neglected but are quite helpful. They can be used to determine HTML elements based on the influence of parent elements. Particularly when used in modular templates and frameworks, they make it possible to integrate smart and intelligent solutions into the layout by enabling elements to be styled based on their order in the DOM. 

The :checked pseudo-class can be used for “checkbox” and “radio” input types. Similar to a :hover pseudo-class, this combined CSS selector is only active if the checkbox has been selected. This happens independent of the value of the input element.

The “:target” pseudo-class can be used as an alternative to similar effect. In this case, attention should be paid to the fact that only one individual value can be used as a fragment identifier in the URL. Unlike menus across several possible levels, this could provide the perfect effect when used in an accordion, for example.