Horizontal Navigation Tutorial 2


On the previous page I showed you how to create a basic horizontal navigation menu. Here I am going to expand on this to add more styling to creaed different effects.

Navigation Bar

To create a full width navigation bar we need to add styling to the whole row - the 'ul' and add a float element to the 'li'
  • ul height and width dimensions
  • ul background color
  • li - float:left;

Tabs:

To create a tabbed look simply:

  • add some space between the links (margin-left: 10px;)
Remember the html code in the body of your document remains the same. Here it is now showing what colors have been applied to which elements.

Have a practice with creating menus yourself - changing such things as the colors, padding and margins. I will expand on the menu styling in a future articles - showing you how to add image backgrounds, create a button effect and more.

I have used the color names here rather than numbers to make the code more understandable but color numbers (hex codes) are best used to ensure all browsers display the same. You can find an excellent comprehensive list of html colors in a recent blog post on the Color Lovers site at:

More Resources to help you:

For more help look at all the different styling examples available on the following sites - where there is no coding shown use the 'view source' feature of your browser. IE = View/Source, Firefox = View/View Page Source

  • Listamatic 1 - numerous menus all showing the html and CSS codes
  • CSS Play An ever increasing number of navigation menus from beginner to more advanced
  • 13Styles.com (free and for purchase CSS menus)

If you do not feel confident about creating a menu yourself these sites will help you:

« Previous Tutorial