#158: An Expando Button Menu

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.