Easy Animated Menu Toggle for a Little Something Extra

This week I thought I'd quickly share a little snippet of code that I've found to be low effort but high impact: A mobile menu treatment that animates between 3 horizontal lines and an X on click.

I haven't found any accessibility issues with it; it's fully keyboard navigable and easy to click on. Regular focus styles apply. Clients always ooh and aah. And it's easy to drape over any existing HTML/JSX.

The pen is a nice jumping-off point to add different animations, styles, etc. To see an example in production, check out grains.org or ifti.edu

See the Pen Animated mobile menu toggle by Jessica Martin (@personofnote) on CodePen.