Introduction

Here's a problem you may run into as you continue your journey in web design.

Say, for example, you've placed a links menu on every page on your website. What happens when you add a new page to your site? You'll have to go through and edit every page to add that link to your menus.

This is usually fine when your site is still pretty small. But the larger your site becomes, the longer it will take to edit all of those menus. Wouldn't it be easier to just make one menu and embed it in all of your pages? That way, when you need to update your navigation, you only have to change a single file.

The good news is you can!

Some Background Information

In the old days, people often used frames for navigation. Frames divided up the browser screen into multiple parts and loaded separate pages into each of them. People became very annoyed with frames because it was easy to get "stuck" in a poorly-designed frameset. In addition, it can be difficult to share links when frames are in use, because only the address of the frameset itself is shown in the URL bar. Frames still work, so there's no reason you can't use them, but it's not recommended.

Unlike frames, which open entire pages, there are includes. Includes do exactly that - they include some code into your page. With Server-Side Includes, the web server inserts the code directly into the page before sending the page to a browser. This is done with SSI or PHP or some other kind of server-side programming language and works great, except for one problem: free webhosts rarely support them.

But with a little bit of work, you can have the same effect with JavaScript. JavaScript is a scripting language built into browsers rather than servers, so it works on any webhost.

Client-Side Includes with JavaScript

Let's start out with a very basic navigation menu as our example:

Client-Side Includes work thanks to two features of JavaScript:

• JavaScript can insert HTML into the document
• JavaScript can be embedded from an external .js file

The first step is to cut the unordered list out of our example page and paste it into a new file.

For the include to work, the list will need to be wrapped in JavaScript's document.write(); function. Just like with HTML, you could probably do it all as one single line if you wanted to, but it's probably better to break it up for readability. For that reason, I've wrapped each separate line of the HTML in its own JavaScript function. Once that's done, save it as a JavaScript file. I've named it nav.js in the example.

Now all we have to do is include the JavaScript file in the original page. To do that, we simply add the following line where we want the list to appear:

<script type="text/javascript" src="nav.js"></script>

(With src="" being whatever you named your JavaScript file, of course.)

Now when you load the page, it will insert the navigation list from the JavaScript file. It will look exactly the same as it would have originally, before we moved the list to the external file. But now you can add the embed code to as many pages as you want, and you only have to edit nav.js when you want to update the list!

You can use this technique for any HTML you want to display on multiple pages, not just navigation menus. I use this method on both this site and Lily's Flower Garden for the navigation menu, page footers, and for defining any alternate stylesheets.

Caveat

The only downside to this method (as far as I know) is that it won't work if someone's disabled JavaScript in their browser. But since most websites will break without JavaScript anyway, I personally don't think it's much of a problem.