Grow your CSS skills. Land your dream job.

An Exploding CSS Menu

Published by Chris Coyier

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.

explodingmenu.png

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.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Comments

  1. Permalink to comment#

    I love this example, but it does not work in Internet Explorer 6.0, at least in my tests. As much as I hate this browser… [never-ending debate ensues].

  2. Permalink to comment#

    Yeah, it’s borked in IE 6. I haven’t quite got that one worked out yet. I don’t think IE likes the fact that the height changes on rollover. I have no idea why though, that’s new to me. It’s not a psuedo class or anything…

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".