Horizontal Navigation Tutorial 1


Creating a Horizontal Menu Step by Step

I will start off with some basics in this article and follow up with more detail later.I have been asked to explain how I created the horizontal menu on this blog. (I am always interested in you letting me know the things you would like to learn).These techniques can apply to built in blog menus as well a to others you may wish to create yourself.

Step 1

The first step is to create a list as you would with a vertical navigation as follows:

Here is html code which goes in the body of your document. This remains the same all the way through this tutorial:

Explanation

  • <div></div> is used so that the menu can be given a class (class="horizontal-menu") to distinguish it from other lists or menus on your page. Styling can then be applied to this division only.
  • <ul></ul>  =  an unordered list
  • <li></li>    =  an item (line) within the unordered list

Step 2

Add a little CSS Coding - this is placed in the 'head' section of your template and can be added to the bottom of the styling that is already there.
  • give the link a color and a background color - horizontal-menu a: {color: white; background-color: lightskyblue; }
  • removed the bullets next to each line - list-style: none;
  • removed the underline from the links - text-decoration: none;.

Step 3

The next stage is to style the list to make it appear horizontally across the page by
  • adding the element "display:inline" to the 'li' - to stop the line breaks

Step 3

As you can see more styling is still needed.Let us

  • Create some more space around the link text - padding: 3px 10px;
  • Take out the margins and padding on the area surrounding the menu to move the menu to the left - padding:0; margin:0;
  • Change the background color of the link when it is hovered over by adding the element "horizontal-menu a:hover".

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: