/navigation-drawer

🗄️ Navigation drawer Implemented with HTML and CSS only.

Primary LanguageHTML

Navigation drawer

Key points

  • Hidden <input type="checkbox"> as a toggle;
  • Fullscreen <label> element for veil;
  • Google Material spec for sizes, animations, and colors.

Accessibility

Implemented with HTML and CSS only, but for A11y it uses few lines of JavaScript:

  • Support keyboard navigation (Esc and Enter);
  • Prevents page scrolling when the navigation drawer is open.

TODO

  • Only what's missing is the focus bounder :)

Demo https://vpodk.github.io/navigation-drawer/