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.
|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 (
||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 ;-)