Alternatives to Frames For Navigation

One of the most common reasons that webmasters cling to the use of HTML frames is to impliment a standard navigation system or menu on their site. That is, they use frames to allow them to use a single HTML file for navigation across their entire website. The attraction is obvious. Using this approach means you only have to maintain one page/file in order to update your entire website. But there are some serious drawbacks to using HTML frames. First of all, its unfriendly to users because they cannot bookmark individual pages on your site. When using frames, every page has the same URL - that of the parent frameset page. Second, search engines have difficulty indexing frame-based websites - especially if you do not properly impliment the <NOFRAMES> section of the frameset page. Even if you do include discrete links to individual pages in your site within the <NOFRAMES> section, you have to worry about users clicking on links to pages that were designed to fit into your framed-page layout design. Clearly, you should carefully consider any alternative to frames you can use.

Presented here are some simple and effective alternatives to using frames. The overall approach relies on CSS level 1, which is widely supported by all browsers released since at least 1999, while still giving you the convenience of having your navigation menu stored in a single external file. The alternatives I came up with are:

Server Side Includes.

External JavaScript file.

<IFRAME>s.

PHP

Fortunately, the browser software used by about 95% of users is fully capable of supporting all of these methods. The menu in the left-hand column of this page contains links to examples of all three methods. If you check the source for this page, take note of two things. First, the content of the menu on this page is simple HTML located at the bottom of the page. Second, that all of the CSS styles are contained in an external style sheet. This same external style sheet is used for all of the example pages. It is only the implimentation of the external menu content that differs. The result is that all of the implimentations appear at first glance to be nearly identical. It also means that you are limited to the two-column/menu-on-the-left layout I used here. I used it for convenience - that is, its dirt simple to impliment and expand. But there's nothing to prevent you from making a menu-on-top/content-underneath design or anything else you can construct with CSS.

Server-Side Includes have the advantage of not relying on the user's browser for any support beyond CSS level 1. They require that your site be hosted on a server that uses Apache server software and that your hosting service supports their use. After configuring your server control file (.htaccess), a simple instruction inserted in your web pages will retrieve the contents of an external HTML file or execute a CGI script to create the navigation links. The downsides are that not all hosts allow users access to programming facilities, you may have to rename your HTML files with the extension ".shtml," and, of course, you have to be fluent in a programming language like Perl, Ruby, or PHP if you want to do more than simply insert the content of an external HTML file into your pages. The advantage of Server Side Includes is that the effect is invisible to the browser. All the browser sees is the final, complete HTML document.

External JavaScript files offer a high-degree of cross-browser compatibility. The ability to use external JavaScripts has been around since 1996. The only limitations are that a small percentage of users run with JavaScript support disabled (thanks to the proliferation of pop-up ads and privacy paranoia), and the code required to insert HTML into the menu can be cumbersome to update or expand.

<IFRAME>s could be the best alternative to Server Side Includes. The <IFRAME> tag was a proprietary Microsoft invention that limited its widespread use until Netscape Navigator started to support it with the release of their v6.0 software in 2000. That means this tag is supported by roughly 98% of browsers in use today. With little effort, an <IFRAME> is like a little sub-window within your pages. If you know any HTML whatsoever, you can use an <IFRAME>. It works much like regular frames by adding content of an external HTML file and inserting it into the parent HTML document.

PHP is the most popular programming language on the web today. It's easy to learn, and even easier to use on a website. The essential fact is that PHP allows you to "include" external files in virtually the same way that Server Side Includes operate. All you have to do is use the ".php" extension on your HTML files and then add a small snippet of PHP code to call in the external menu file. Examples of this can easily be found on the web or at http://www.php/net - a wonderful resource for PHP users. PHP is easy to learn, even for non-programmers. Best of all, it's easy to experiment with, and you can even install it on your home computer and learn to use it offline and out of sight of your users. Like Server Side Includes, PHP's 'include' instruction creates a seamless integration of the external file with the parent document in a manner that is invisible to browsers.

How Does It Work?

The overall approach is to install two <DIV>s into your pages. The navigation menu content is stored in a <DIV> whose ID is "nfNavMenu" and your page content is stored in a second <DIV> whose ID is "content". These <DIV>s are styled with absolute positioning to control the overall layout. The sample code I provide displays a vanilla two-column layout with the navigation menu in the narrow left-hand column and the second column that occupies the balance of the page width contains the content of each page. From here, your choice of implimentations differ only as to how the contents of the navigation menu are generated and displayed.

The Server Side Includes method, the <IFRAME>s method, and the PHP method all rely on importing/inserting an external HTML file. So all you have to do is construct your navigation menu HTML file and add the appropriate support code to your other pages. When using the <IFRAME>s method, keep in mind that you have to construct a complete HTML file, with its own links for external stylesheets or JavaScripts.

The External JavaScript method is very similar, except that instead of constructing an external HTML file, you use an external JavaScript file to generate the HTML that displays your navigation menu. Again, all that's required is adding your links titles and URLs into the JavaScript and add the nfNavMenu support code into your web pages.

RainboRick's No-Frames Navigation System© is provided at no charge. If you use and enjoy this software, please place the following link on your site's main page, or on a page that is directly linked to your site's main page:

<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tools for Webmasters</a>

The button below will allow you to download a .zip archive containing all of the files in this package. Just install them in their own directory on your computer.

Quiet Count© · 404 Logger© · Image Shield© · RRAnimate© · PopZoom© · SMTP_FormMail · Referer.zip© · No-Frames Navigation System© · Spider Tracks© · SearchLog© · CSS Positioning · Automatic Frame Page Loader/Re-loader ·