How to design a horizontal Web 2.0 navigation bar?

This tutorial is a replacement for an older tutorial written by TechSymptom. Since their website is offline for more than a year and the CSS navigation bar tutorial on the Web Development Blog was missing this design tutorial, we decided to recreate the images and posted the tutorial here. The tutorial is created in Adobe Fireworks!

This navigation bar is using the web 2.0 colors, blue and green. The final result, which is shown below.

1) Create a new document, any size, but I prefer 800×600 pixels. Select the rectangle tool (or press U) and draw a rectangle, 300(w)x30(h) pixels.

2) Select the rectangle and, in the properties toolbar, set background to Gradient -> Linear. Set the background line like I did on the image below and set the same colors.

3) Now, draw another rectangle, 300(w)x1(h) pixels. Set its background to solid and color to #00CCFF. Place that rectangle, just above the first one.

4) Then, draw another rectangle, 300(w)x3(h) pixels. Set its background to solid and color to #99CC00. Place the green rectangle, one pixel below the first one.

5) Select the star tool (the same toolbar where you select rectangle tool) and draw a star, any size. Set its background color to #99CC00. Then move the points dot down, so you get three points, which is a triangle.

6) Now, set the triangle’s size to 13 pixels of width and 5 pixels of height. After you set the size, place the triangle below the text you will write. I wrote Templates. Used font is Trebuchet ms, size is 16 and color is #99CC00. Blue text’s color is #00CCFF. Here’s the final result:

As mentioned above, there is also a CSS tutorial hosted by our partner Web Development Blog.

Latest website templates

  • Vendors
  • Item: #100704
  • Downloads: 0
  • Price: $12
  • Vendors
  • Item: #97021
  • Downloads: 4
  • Price: $22
  • Vendors
  • Item: #78824
  • Downloads: 9
  • Price: $22
  • Vendors
  • Item: #76418
  • Downloads: 2
  • Price: $17