Notice: Array to string conversion in system/classes/theme.php line 93
AlltagsGrauen, est. 2003 :: CSS-only responsive menus with nav icon
« Notice: Array to string conversion in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
http://ag8.alltagsgrauen.info/gui-support-for-moc-player-with-exo" title="gui-support-for-moc-player-with-exo">GUI support for moc player with eXo

Notice: Array to string conversion in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
http://ag8.alltagsgrauen.info/css-only-responsive-menus-with-nav-icon" title="CSS-only responsive menus with nav icon">CSS-only responsive menus with nav icon

Notice: Array to string conversion in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
Notice: Object of class HabariDateTime could not be converted to int in system/classes/rewriterule.php line 112
http://ag8.alltagsgrauen.info/css-only-responsive-menus-with-nav-icon#comment-form" title="Comments on this post">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 ;-)

Be the first to write a comment!

Notice: Array to string conversion in system/classes/theme.php line 93