How to Create an Advanced CSS Menu
October 30th, 2007 Filed in: Tricks & Tips Jump to comments
A few people have asked me how did I create the sidebar menu on Web Designer Wall. Some people thought it was done by Javascript. Actually, it is just some basic CSS image replacement tricks. So I decided to write a tutorial on how to design and code an advanced CSS menu. Typically, a CSS menu either goes horizontal or vertical. In this tutorial I will show you how to utilize the CSS position property and place the menu buttons anywhere you want. It is a two-part tutorial (and don’t forget to Digg it):
- Part 1 - Design Watercolor Effect Menu (Photoshop)
- Part 2 - Advanced CSS Menu (CSS)


June 7th, 2009 at 7:31 am
A great combination of artwork and CSS.
Something for the artist in us all… and something for the nerd in us all.
December 2nd, 2008 at 6:08 am
It’s nothing new but always a good ‘trick’
November 30th, 2008 at 7:29 am
it is not a CSS menu, just an other photoshop work!!
September 17th, 2008 at 9:38 am
Oh ya, by the way, do you accept any outsource project like flash interaction design? And how you charge?
September 17th, 2008 at 9:38 am
I love your blog, especially the cool phoenix you got there, and the tutorial is pretty indeed good!
August 26th, 2008 at 7:14 pm
I agree, simple but very effective. I love your tutorials and of course your designs are inspiring.
Cheers and keep up the good work.
August 6th, 2008 at 5:22 am
great trick!
July 8th, 2008 at 10:58 am
Great job.
As always, great tips !
May 14th, 2008 at 11:33 am
Thxx for ur excellent Tips hats off to you ^^
May 10th, 2008 at 2:54 pm
excellent job thanks…