Designing a Smooth CSS Expanding Navigation

2006-12-06

In this tutorial I will teach you how to design the following smooth, expanding navigation:



I have started with a canvas size 200px width and 196px height. You don't have to use these values.



Now create the background for the first button, I made it 28px in height and a background colour of #6f6f6f but as I said earlier; you don't have to do the same as me.



That background is looking very plain so we'll add a beveled feel to it with the pencil tool, change your colour to #7e7e7e then select your pencil tool and draw a line at the top of the button. Now change your colour to #5e5e5e and draw a line at the bottom of the button. Now the button looks less flat and we can move on.



Now it's looking better but I think it's still a bit too boring so we'll add a shine to it. Now on a new layer, make a selection of the top half of the button then fill the selection with white and change the layer's opacity to 5%.



That button is looking quite good so we'll add a bullet, I have chosen to create an arrow with the pencil tool. You can copy it from the following zoomed in screenshot.



Zoomed out it looks like this:



Now the background of the button is done so we can duplicate the button. First move all of the button's layers into a group to keep things organized then duplicate the group and move it down. Repeat until you have a few buttons.



Now for the sub-menu I want the background to be a different colour so select one of the button background layers then go to Image >> Adjustments >> Hue/Saturation then increase the lightness by 15-20. This is your sub-menu background. I also don't want the arrow on the sub-menus so I removed the arrow from those groups.



Now that our backgrounds are done, we have to add text. I have used 12px Arial with no smoothing and a colour of #dfdfdf.



Now our expanding navigation is complete, I hope yours turned out well. Stay tuned for part 2 of this tutorial, coding the expanding navigation.