Tutorial: Create a Sitewide Menu Using Javascript, Pt. 2

Continued from page 1:

 

Step Four: Add menu as javascript include

In this step is where the magic happens. Now we are going to add a bit of code that pulls the contents of the menu.js file and displays it on your web page as if it were a part of its source code. 

A) Open up the html of any one of your web pages, and place this line of code in the place where you want your menu to appear:

<script language="javascript" src="menu.js"></script>

B) Preview your web page. Provided that you wrote out your menu.js file successfully, the menu should appear on it:

The above menu is being called from a menu.js file. It is not an actual part of this web page's source code.

If your menu doesn't appear or you are getting a javascript error, retrace your steps to make sure you didn't skip a step or leave out any punctuation marks.
 

Step Five: Add to Pages, Then Upload

If everything worked out, you can now add the above line of code to each one of your pages. Then when you're done, you can re-upload your pages and the menu.js file to your web hosting account. When you finally view your web site online, you will see that all of the pages of your site will be equipped with a sitewide menu that can be edited from one .js file. 

So now you no longer have to keep opening every single one of your pages when you want to remove or add a link from your navigation. You can just alter the javascript in the menu.js file, save, then re-upload it.
 

Downsides

Before you get excited about all this (and I hope you are!) there are a few downsides to going this route. 

The first one is that, as you can see, the actual .js file is a bit cumbersome to write out, what with all the quotes and double quotes you have to worry about, not to mention that this is a longer way of writing out your links. If you have only 4-6 links, this isn't a big deal. However, larger than 10 links, and it becomes a pain.

The second one is that if you're really sensitive about search engine optimization, you will have already guessed that this method will not really do you any favors, since the links will not be able to be read.

But if these aren't major concerns for you, this is the way to go.
 

One last thing

Believe it or not, there is actually a much easier way of doing all this, using something called SSI Includes. But we'll save that for another for tutorial! For now, just enjoy this timesaving device, then come back later for another Webdesigner Freebies' tutorial on this other method of creating a sitewide menu.
 

Back to Page 1 | Back to Tutorials | Home