You Are Here: > Web Design > Dynamic Navigation

Site Directory
News

If you have even a small website, you know how much work it is to change even one item on a navigation bar. By using a little scripting, you can create one navigation bar and have the server place it in each web page.

Required component: Server Side Includes (SSI or SHTML) or PHP.

Step 1. Create a file for the navigation menu to be stored. Any extension is acceptable. (I usually use head.txt or foot.txt)

Step 2. Place your html code for just the navigation bar in the file created in step 1. Save and exit. Here's an example of a navbar file: 

<br /><a href="./"><img src="home.gif" alt="Home" /></a>
<br /><a href="news.shtml"><img src="news.gif" alt="News" /><a/>
<br /><a href="dolphins.shtml"><img src="dolphins.gif" alt="Dolphins" /><a/>
<br /><a href="dragons.shtml"><img src="dragons.gif" alt="Dragons" /><a/>
<br /><a href="graphics.shtml"><img src="graphics.gif" alt="Graphics" /><a/>
<br /><a href="mailto:me@example.com"><img src="email.gif" alt="Email" /><a/>
Note: This was writen in XHTML 1.1, the new W3C standard. HTML 4.01 is slightly different but will function the same.

Step 3. Make a copy of one of your pages. (You don't want to test new stuff on your front page) Make the copy have a .shtml extension if you have access to SSI or a .php (.php3 for some servers) if you have access to PHP.

Step 4. Edit the page that was copied in step 3. Remove the navbar code. Do not close the file.

Step 5.

Add a line to the file in place of the navbar.

If you're using SSI: 
<!--#include virtual="navbar.php" -->
(where navbar.php is the file created in step 1)

If you're using PHP: 
<?php virtual('navbar.php'); ?>
(where navbar.php is the file created in step 1)

Save and exit.

Step 6. Upload the two files and surf to them.
Search the Site