codeMelon > web > Menus with JavaScript: Introduction

Menus with JavaScript: Introduction

by Marshall Farrier|8/5/09

I've just started learning some basic JavaScript and have discovered how useful it can be for maintaining menus. In the following, I'll explain how to create menus with JavaScript without presupposing that you already know any JavaScript at all. Those who have no background in JavaScript should, however, be aware that punctuation is very important and pay careful attention to the punctuation patterns in the blocks of code I provide. JavaScript code is somewhat more forgiving of syntax errors than most compiled programming languages in that browsers sometimes fill in the blanks for punctuation omissions, but incorrect syntax is still asking for trouble in the long-run.

The key to coding menus in JavaScript lies in one simple command which reads

document.write("text");

This command seems both ridiculous and trivial when you first learn that all it does is cause the character sequence "text" to be written at the current location. Why on earth would you go to the trouble of writing all of this complicated script when you could just write the string "text" into your page without further ado?

In the case of menus repeated on multiple pages within your website, there's a very good reason for defining a JavaScript function that makes use of this command: Whenever you modify the menu, you'll only have to change it in one spot, namely on the external page where you keep your JavaScript function definitions. Having the complete menu available for editing on a single page is particularly convenient for menus that are likely to change frequently, such as a list of links to changing articles within some section of your website. Those who have copied and pasted revised menus on multiple pages a few times will appreciate the convenience of this method, which is not at all difficult to implement.

First you create a JavaScript file to which your pages link in a manner very similar to the way in which they link to an external style sheet (.css). Your JavaScript file should have the extension .js, so you could name it, for example, myscripts.js. You then write a menu function into this file, again just the way you write style declarations into your CSS files. I'll use as example the menu for this section as of the time at which I'm writing this article. Right now, I only have 3 links in my menu but expect to have more as the section grows. Here's the code that generates my current menu:

function itWebMenu()
{

document.write("<a href='web_main.htm'>Creating a good website</a>");
document.write("<a href='web_icon.htm'>Icons</a>");
document.write("<a href='web_menu.htm'>Menus</a>");

}

Note that within the document.write() function, you have to enclose the string that is the argument of the function in double quotation marks(") and that double quotation marks within this string need to be written as single quotation marks ('). You can break up the individual parts of your code however you wish. For example, rather than

document.write("<a href='web_icon.htm'>Icons</a>");

I could have written

document.write("<a href='web_icon");
document.write(".htm'>Icons</a>");

I hope it's clear why the result of calling the function from a page of HTML code would be exactly the same. In the code I'm actually using I've broken the lines up so that I can easily see each anchor as a unit whenever I add or modify pages and need to edit my function.

Now that the function has been defined, you need to make it available to your webpage. You do that by creating a link to the script page in the head element of your HTML page, again in a manner very similar to that in which you create links to CSS files. For the link to our file myscripts.js, we write within the head element the following code:

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

Now that the page provides a reference through which the browser can locate our function definition, we can call the function within the body of the page. To call the function, we can now write:

<div id="itSubMenu">

<script type="text/javascript">

itWebMenu();

</script>

</div>

To show the context of our JavaScript function, I've also included the code for the div container in which the anchors are placed. Now, wherever this function is placed on the page, the code will execute and cause HTML code to be written in that spot and used by the browser in rendering the page. Normally, it's much easier just to write the HTML code directly, but since we are dealing here with a menu repeated on multiple pages, we created a JavaScript function so that we can revise the menu on all pages at once simply by revising the contents of the function itWebMenu() on our .js page. We no longer have to go back and paste new menu elements onto each page separately.