Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Hamburger menus are great for toggling a mobile navigation. Adding slick animations to show the open or closed state can be tricky but I will explain how this can be done pretty easily. Let’s get started. 😎 If you’d like...
The post Animated Hamburger Menu appeared first on Treehouse Blog.
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
The trick is that the top and bottom lines aren’t just a straight <line /> but a <path /> that curves up, down, and around forming the cross. You can only see part of the line (making it appear straight at first) because the stroke-dasharray only reveals part of the line. Then, by animating both the stroke-dasharray and stroke-dashoffset, the ✕ is formed.
Direct Link to Article — Permalink
The post Line-Animated Hamburger Menu appeared first on CSS-Tricks.
A pleasant little romp through iconography and culture from Sophia Lucero. The "hamburger" menu icon we're familiar with now is really a sign from Taoist cosmology.
Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire 火, ☳ for thunder 雷, ☴ for wind 風, ☵ for water 水, ☶ for mountain 山, and ☷ for ground 地.
We shouldn't be using it for a menu icon, but it makes me wonder if we ought to get a semantically and accessibly appropriate Unicode character for a menu. I know there is a whole fancy process for emoji.
Direct Link to Article — Permalink
The post Hamburger ☰ Heaven appeared first on CSS-Tricks.