Side navigation Optional
Drawer style navigation, which slides in from the side of the page. This component is used for an extra layer of navigation links, usually for top level or external links. The menu is not visible on page load and requires a click to open.
Features
- CSS only, no Javascript.
- Opening/closing works with keyboard, mouse and touch.
Configuration
- Sass file: components/_side-navigation.scss
- Include the Sass file in theme.scss:
@use "components/side-navigation";
Example
Click the menu button in the top left corner on this page.
View source for Html code.
Html / Javascript
The component uses a Html checkbox to keep the "state" of opening and closing of the menu drawer.
The checkbox uses some small inline javascript to add some additional functionality for keyboard navigation; open/close the menu via the Enter key. Here is the full code:
<input type="checkbox" id="side-navigation" onkeydown="if (event.keyCode == 13) this.click();" />