Personal Web Pages

  1. Home
  2. Computing & Technology
  3. Personal Web Pages

Simple Web Page Navigation Menu

By Linda Roeder, About.com

Add a menu to your Web pages so your readers can find their way around. A left side navigation menu is the most common so here is a template you can use for a simple menu. Just copy this code and paste it into your HTML code where you want your menu to show up.

<table border="0" bgcolor="lt blue"><tr><td width="150">

<B><font size=4 color=555666>Title of Menu</font></B>

<hr width="150">

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title One</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Two</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Three</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Four</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Five</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Six</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Seven</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Eight</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Nine</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Ten</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Eleven</B></a><p>

<a href="http://.htm" style="text-decoration : none;"><font color=000066><B>Title Twelve</B></a>

<hr width="150">

</td></tr></table>

This is what you need to do to change this code to work for you:

1. Where you see "http://.htm", change to whatever the address of your page is.

2. Where you see "Title One" or other Title name, change this to the title of the page you are linking to.

3. Where you see color names or color numbers, change this to the color name of number you want to use for the color you want your text to be.

4. If you want your links to be underlined, remove the whole code that says style="text-decoration : none;". I have this code in here in case you don't want the underlined look.

5. If you want a border around your menu, find where it says table border=0 and change the number to however thick you want your border.

6. If you want your background to be a picture or graphic instead of a color, replace bgcolor="lt blue" with background="picturename.gif".

Explore Personal Web Pages

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

Personal Web Pages

  1. Home
  2. Computing & Technology
  3. Personal Web Pages
  4. Templates, Scripts, Hacks
  5. Free Templates: Web Pages
  6. Simple Web Page Navigation Menu

©2009 About.com, a part of The New York Times Company.

All rights reserved.