#158: An Expando Button Menu

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

I saw a Dribbble shot the other day by Eli Brumley that had a cool interactive effect. A simple circular blue button, when clicked, expands into a small menu itself. I fired up Professor Mode on CodePen to let people watch as I built, but I also recorded it so I could talk my way through it and publish it here.

The intention here is a thinking exercise involving HTML, CSS, JavaScript, SVG, and design. It’s not a perfect production-ready widget. In fact, at the end, we discuss some of the things we didn’t get to.

See the Pen Menu Toggle Thing by Chris Coyier (@chriscoyier) on CodePen.