CSS-only responsive menus with nav icon

No Comments

A collection of several CSS-only responsive / mobile navigation menus. What I found after digging around for CSS-only mobile navigations using the :checked pseudo class (initially thought I could use the :target pseudo class). My aim was digging up actual, working, real life examples, to deduct how :checked / :target / :focus works exactly, and then rebuild the navigation of my (future) portfolio site accordingly.

Article Description Links
Pure CSS Off-screen Navigation Menu by Austin Wulf Classic "toggle" navigation menu. Uses sibling selector (~) and :checked pseudo class. Codepen, Demo
Pure CSS Navigation Overlay by Alessandro Calvaresi Responsive menu, that, as the name already suggests, uses an overlay. Menu links automatically scale down from horizontal to vertical view and vise-versa, depending on the screen width. Personaly, I found this example to be the easiest to understand. Codepen, Demo
Morphing Menu Button Uses :checked, but not the sibling selector. Instead the adjacent selector (+; aka "next-sibling selector") is being used. Codepen, Demo, Improved version using radio input field
Navigateur by Mike King Github project using SCSS, combining both the :checked pseudo class, the general and the adjacent sibling selector. Turns a horizontal navigation into a mobile, vertical "on-click" dropdown menu.
Seems to cheat by adding an empty "onclick" attribute, but could just be used as a fallback or browser hack (not entirely sure).
Demo, Implementation tutorial for WordPress
Pure Drawer Github project using SCSS, implementing the classic toggle offscreen navigation menu. Also allows for multiple menus (which are called "drawers", thus the name). Cheats by relying on Modernizr and "enhancing" the CSS base with jQuery though. Either heavily inspired by Codrops or vice-versa. Demo, Documentation, Github repository

ps: yes, as a result, I could reimplement the mobile navigation easily. Gonna be covered in a separate post soon ;-)