CSS-Tricks PSD to HTML

Tag Cloudish Crazy CSS Menu

by: Chris Coyier on September 9th, 2007

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]


Responses


  1. 1

    Gravatar

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

    Great example of crazy menu


    Comment by Romz — September 10, 2007 @ 12:01 am

  2. 2

    Gravatar

    Doh! Thanks Romain, it’s fixed now.


    Comment by admin — September 10, 2007 @ 5:06 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

Live Comment Preview


Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.