CODECUBE VENTURES

Separating Style From Content

I've been playing with css a lot lately ... these CSS menus are one of the results.

After reading Eric Meyer on CSS, I decided to try to make a menu that could be changed between a top nav bar, and a sidebar by simply changing the stylesheet. That presents a problem because I wouldn't be able to include any structural markup in the source such as br tags (for the sidemenu) or "|" separators (for the topbar).

I soon found a great example in eric meyer's book that tipped me off. The example shows how to take a list of links (a tags), and use css to change them into block level elements by using the display:block; css construct. This makes each link be on it's own line, thus solving our problem of needing additional structural markup.

After playing around with a couple of different styles, I finally came to an agreement that works in IE, Mozilla, and Opera (though they don't render exactly the same). There are three menus (each with identical markup)

  • top bar: produces a horizontal navbar

  • side bar: produces a vertical menu

  • unstyled: just to show what it looked like originally

You can see the page here. Feel free to check out the source code to see how I did it.

Hope that helps someone out there!

Latest post: Digging Up the First Version of CodeCube

See more in the archives