Tag: Hamburger

Line-Animated Hamburger Menu

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 ArticlePermalink

The post Line-Animated Hamburger Menu appeared first on CSS-Tricks.


, ,

Hamburger ☰ Heaven

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 ArticlePermalink

The post Hamburger ☰ Heaven appeared first on CSS-Tricks.