An Exploding CSS Menu

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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

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.