An Exploding CSS Menu

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

By exploding, I sort of mean “the menu blocks appear to expand vertically”, but you get the idea. The theory is that upon rollover, you can change the height and offset of an element (or width or any number of other things). If you set things up just right, you can actually have objects that grow and don’t really change position. This is a bit like the Hoverbox Menu by Design Meme. This can be a surprising and interesting effect for webpages. This concept can (obviously) be adapted into lots of different uses. It’s also fairly lightweight and quick loading, due to the fact it’s all done with CSS.


As always, feel free to check out the live example and download and manipulate and use however you want. Fair warning, I wasn’t as careful with my Photoshopping as I should have been, so there are some pixels off here and there. You should be able to fix it though =), the .psd is included.