Grow your CSS skills. Land your dream job.

Tag Cloudish Crazy CSS Menu

Published by Chris Coyier

OK, this is a little cheezy, but it's just intended to be an example of something you can do with CSS. Certainly this could be adapted in any number of different ways to achieve cooler effects. The theory here is to set up a flexible width box with your menu inside. Each menu item is given a unique class. The classes are then defined with font styles and positioning information. Vertical positioning is non-flexible, but horizontal position is by way of text-alignment and/or % margins.

crazymenu1.png

crazymenu2.png

[LIVE EXAMPLE]

[VIEW CSS]

[DOWNLOAD EXAMPLE]

Comments

  1. Romz
    Permalink to comment#

    Don’t forget to close the “p” tags into the demo file.

    Great example of crazy menu

  2. admin
    Permalink to comment#

    Doh! Thanks Romain, it’s fixed now.

Leave a Comment

Current day month ye@r *

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