No-Frames Navigation System
Using External JavaScript and AJAX

In recent years, JavaScript has taken a siginificant evolutionary step that allows web designers to make their webpages much more interactive using a technology referred to as AJAX, which stands for "Asynchronous JavaScript and XML". We can use this technology to use JavaScript to effectively mimic the effects of Server Side Includes and PHP Includes. That is, the JavaScript in the external file "ajaxNavMenu.js" reads in an external file and writes the contents of that file into your webpage in order to generate your navigation menu. And it's nicely cross-browser compatible going back to Internet Explorer 6.


Using this system couldn't be much easier. You just call the supporting JavaScript file in the <head> section of your web page using the <script> tag. Then insert a JavaScript call to the function "ajaxNavMenu()" AFTER THE <DIV> where you want the menu to appear in your webpage and pass the URL of your navigation menu file in that code. You'll see how it's done by looking at the bottom of the source code for this page, which is also included in the package you can download from the main No-Frames Navigation Menu page.

You can update the navigation on your whole site just by editing that single external file. It's even easier than using frames because you don't have to worry about the TARGET attribute, and you can add links to pages outside your own site without having to worry about them loading inside your <frameset> by accident.

If you rely on JavaScript to provide navigation for your website, it is vital that you also include a <noscript> section in your pages that gives users running with JavaScript disabled a means of navigation. You could use an <IFRAME> in your <noscript> to pull in a page with some links, but it's probably best to simply add some plain HTML links to your most important pages.

The original code I used for JavaScript navigation menus is still in the package. It is a brute-force approach that simply writes out the HTML for the menus. The advantage to the old method is that it is supported by very old browsers, but it's effective obsolete now.

However, it is cumbersome to write JavaScript to generate even modestly-complex HTML code. So, its not the option I recommend. The example code I include in the package to demonstrate this second method uses arrays to insert URLs and link text using a for-loop to make it as easy as possible to add more links to your navigation menu.

To use an external JavaScript file, just insert the following HTML code in your pages where you want the menu to appear, as in:

<script type='text/javascript' src='ajaxNavMenu.js'></script>

Just change the name of the src file to the JavaScript file that generates your menu. A basic Javascript to create a navigation menu would look something like this:

document.writeln('<a href="index.html">Home</a><br>');
document.writeln('<a href="page1.html">Page 1</a><br>');
document.writeln('<a href="page2.html">Page 2</a><br>');

As you can see, the code to get JavaScript to write HTML can be cumbersome, and you have to watch out for quotation marks causing syntax errors. Again, this is why I prefer the version that uses AJAX.



This page was last modified on August 27, 2020



Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!