Tutorial: Create a Sitewide Menu Using Javascript

Posted:

You've got a dozen pages to your web site and updating the menu is becoming a pain in the you-know-where. If that's you, then check out this tutorial!

 

When Site Maintenance Becomes a Chore

A problem you may encounter when maintaining your web site is updating its navigation-- in other words, the menu that allows visitors to browse to the other parts of your site. [>>] You may have realized that every time a new page was added, you had to keep updating the menu on each page of your site to reflect the new changes. 

If  your site is only about 5-8 pages, this isn't so much a problem. But what happens if its pages are blooming to well over ten pages and more?
 

Javascript to the Rescue!

One way to avoid this problem is to build your navigation in a javascript file [.js], then add it as an include to all your pages. That way, all you have to do when you want to update it is to merely alter the javascript file the one time, rather than one time for each web page that contains your menu.

Don't know javascript at all? No problem! Below is a step-by-step way of creating a site-wide menu using javascript, with no real knowledge of how that language works. All that's required is a sharp memory and a basic understanding of the concepts behind this method.
 

Step one: Building javascript file [.js]

The very first thing you have to do is to first create the javascript file (or .js) file that will contain your menu. You will have to do this in Notepad.

A) So open Notepad and create a new document. 

B) Now add this:

document.write ("  ");

Note: in case you're curious, this is javascript's way of printing something to a web page.

C) Next, add in between the double quotes the first link that will appear in your menu. For example, if your first link is "About Me", then add it using the <a href></a> tags:
 

document.write ("<a href='aboutme.html'>About Me</a> ");

Carefully note the example above! Note that when I wrote out <a href='aboutme.html'>About Me</a>, I used single quotes instead of double quotes. There's a reason. Whenever you have nested quotes in javascript, always make the second set of quotes single (') and not double ("). Otherwise, the browser will get confused by all the nested quotes.

D) You have one more little thing to add. Add a <br> at the end of the <a href></a> tag, like this:

 document.write ("<a href='aboutme.html'>About Me</a><br>");

This is to make sure that no matter how many menu items you add, there will be a carriage return for each one.
 

Step Two: Keep Building Menu

If you're getting the idea, keep building a new line of javascript for each URL you want to add to your menu. Make sure that you write each line straight out, and don't hit "enter" until you're ready to start a new line. Even though the examples above are shown with line breaks, that is only because of the limited space on this web site. So in reality, you should really be writing your file like this:

document.write ("<a href='aboutme.html'>About Me</a><br>");
document.write ("<a href='hobbies.html'>Hobbies</a><br>");
document.write ("<a href='gallery.html'>Gallery</a><br>");
document.write ("<a href='contact.html'>Contact</a>");

Don't write it like this!

document.write ("<a href='aboutme.html'>
About Me</a><br>"); 
document.write ("<a href='hobbies.html'>Hobbies</a>
<br> "); 
document.write ("<a href='gallery.html'>
Gallery</a><br>"); 
document.write ("<a href='contact.html'>Contact</a>
<br>");

Otherwise, you will get a ton of javascript errors when you eventually run the javascript include. 

Also, notice the semicolons. These are very important in javascript because they tell it when a line of code has finished. So make sure that you've added those as well!

F) When you're done, carefully study the example above, then make sure you have done the following:

• Used single quotes instead of double quotes inside of the <a href></a> tag.
• Added a <br> tag at the end of each <a href></a> tag.
• Written each line of javascript straight out, without any line breaks
• Added a semicolon at the end of each line.

Step Three: Save Notepad Document with ".js" extension

Is everything in order? Good! Now save this document with the ".js" file extension. For the sake of this tutorial, let us save it as menu.js. 

In addition, make sure you have saved it to the exact same directory where your pages reside! So wherever folder or directory you keep your web pages, save it to that same folder or directory.
 

Onwards to Part Two -->