An Exploding CSS Menu

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.

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.