Create A Website Navigation Bar

The navigation bar is the list of links below the logo, or in the margin (or wherever you put it). It can be horizontal or vertical. There are examples of both on this website.

Using text links is the simplest way to construct a navigation bar like this - and is effectively used by many popular sites (i.e. Yahoo). You'd construct a text link like this:

<a href="http://www.yourdomain.com/index.html">
Home Page</a>
&nbsp; &nbsp;

INFO:   is HTML for the space character. (This just puts space between the menu items). See The HTML Document Character Set for a complete list.

You can use images in your links bar if you desire. You just use something like the following:

<a href="http://www.yourdomain.com/index.html">
<img src="home.gif" alt="Home Page" border="0"></a>
<img src="space.gif" width="30">

INFO: The 'alt' attribute of the <img> tag defines the text that appears if the image fails to load - or when you hold the mouse over it. Text links are coloured blue (by default) by the browser, similarly images are given a blue border to indicate they are links. This can look bad. Setting the 'border' attribute of the <img> tag to zero prevents this border being drawn around the image. space.gif can be a small transparent image. It can be just 1 pixel in size, the width attribute will effectively stretch it to create as big a gap as you want.

If you're not sure what the all the pages in your site will be yet, then you could create them first, or use this as an opportunity to plan your site.

The links bar in the examples are completely static. You have to change them by hand, in every file that contains them, every time you want to change it! If your web page will be changing, and you'll be adding / removing pages to it then you really should use a dynamic navigation bar written in Perl or PHP.

If you change your site, you only have to change this one file. You include (that's a PHP command!) this file in all of your web pages and it shows the header! (The nav.php script also greys out the link to the page you're on.)

To create a dynamic links bar, see the page on PHP Navigation scripts.

• Xara Menu Maker cool software for creating DHTML menus.
  
  
• Ex-Desins.net Cool online generators to create great Flash navigation bar, Flash button, JavaScript, CSS and DHTML special effects and menus for your web site for free!
  
  
• i3DThemes.com More cool online generators.
  
  
• Tamingthebeast.net's Free DHTML Navigation Bar Generator