#158: An Expando Button Menu

Avatar of Chris Coyier
Chris Coyier on

Take your JavaScript to the next level at Frontend Masters.

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.