Alternatives to Frames For Navigation

Bookmark this
on Delicious

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 presenting frame-based pages in the search results because they have to worry about users clicking on links to pages that were designed to fit into a <frameset> layout design. Clearly, you should strongly consider any alternative to frames you can use on your website.

Presented here are some simple and effective alternatives to using frames to produce a single-file navigation system. You can download all of my example code by using the bottom at the bottom of this page.

The HTML layout I use here to demonstrate ways to replace frames relies only on CSS level 1, which is widely supported by all browsers released since at least 1999. The layout is merely for demonstration here and is not required to give you the convenience of having your navigation menu stored in a single external file. The alternatives I use as examples are:

Server Side Includes

External JavaScript file

<IFRAME>s

PHP Includes

Fortunately, the browser software used by about 98% of non-mobile users is fully capable of supporting all of these methods, and you can easily bring this up to 100% by using plain HTML and omitting the CSS styling enhancements. The menu in the left-hand column of this page contains links to examples of all four 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. The 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, it's 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.

Alternative #1: Server-Side Includes have the advantage of not relying on the user's browser for any special features. They require only 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 server control facilities. On those hosts you may have to rename your HTML files with the extension ".shtml,". Of course, you have to be fluent in a programming language like Perl or PHP if you want to do more than simply insert the content of an external HTML file into your pages. For example, if you wanted to have the navigation menu update itself automatically in some way, that would require some programming. But for simply inserting a menu on all of your pages, a plain HTML file works perfectly with no programming required. 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.

Alternative #2: 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 a little cumbersome to update or expand.

Alternative #3: <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.

Alternative #4: 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 This Single File Navigation System 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:

<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 ·