Alternatives to Frames - One File Navigation

One of the most common reasons that webmasters cling to the use of HTML frames in their website design is to incorporate a common navigation system or menu on every page of their website. 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 technique means you only have to edit one file in order to update the navigation menu your entire website.

But there are serious drawbacks to using HTML frames. First of all, it's unfriendly to users because they cannot bookmark individual pages on your site. When using frames, every page appears to have 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. Third, when you use frames, you have to make sure to properly set the 'target' attribute on all internal links so that the new pages load into their proper position within the frameset. I've traditionally recommended that you should strongly consider an alternative to frames in your website design. But truly, you should simply avoid using frames. Full stop.

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

Menu

NoFrames Navigation
Main Page


Menu File Examples:

Server Side Includes

External JavaScript

<IFRAME>s

PHP Version

How To Replace Frames
In Your Website

The HTML layout I use here to demonstrate ways to replace frames relies only on CSS2, which is widely supported by all browsers. 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:

  1. Server Side Includes
  2. External JavaScript file
  3. <IFRAME>s
  4. PHP Includes

Fortunately, the browser software used by about 99-44/100% of users is fully capable of supporting all of these methods. I used this particular layout to more closely mimic the behavior of frames in keeping the navigation menu in a fixed position while the rest of the page scrolls. The navigation menu in the left-hand column of this page contains links to examples of all four methods, with details of how they work and how to best use them in your website design. 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 file loaded via Server Side Include inside a div 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 implementation of the external menu content that differs. The result is that all of the example pages appear at first glance to be nearly identical. I used this two-column/menu-on-the-left design for convenience and illustration purposes. It's dirt simple to install on any website and expand it as you like. But there's nothing to prevent you from making a menu-on-top/content-underneath design, a drop-down menu, or anything else you can construct with HTML and CSS while using an external file to generate your navigation menu.

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 downside is that not all hosts allow users access to these server control facilities. On those hosts you may have to rename your HTML files with the extension ".shtml,". 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 flexibility and a very high-degree of cross-browser compatibility. The ability to use external JavaScripts has been around since 1996. The only limitation is that a small percentage of users run with JavaScript support disabled, and there are simple work-arounds for them. JavaScript is a often the only choice for websites that use free hosting services that do not support Server Side Includes or PHP.

Alternative #3: IFRAMEs could be the second best alternative to Server Side Includes. 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, but doesn't require a FRAMESET page. However, since using an IFRAME means that the navigation links are not actually a part of the parent page, your site may not perform as well in the search engines as it would if you used the other options, so I don't really recommend using this method.

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 and search engines.



How Does This Single File Navigation System Work?

Each of my examples use a different method of incorporating an external file containing the navigation links into a parent web page. The page designs are all nearly identical to demonstrate the fact that the method is independent of the web page design. So all you have to do is construct your external navigation menu file, and add the appropriate support code to your other web pages. When using the IFRAMEs method, keep in mind that you have to create a complete HTML file for your navigation menu, with its own links for external stylesheets or JavaScripts.

The page design I used here requires two DIVs, one for the page content and one for the navigation menu. The navigation menu content is stored in a DIV whose ID is "nfNavMenu" and the page content is stored in a second DIV whose ID is "content". These DIV are styled to control the overall layout, keeping the menu display in a fixed position in the browser window just like FRAMEs do. This is done by using "position:fixed" for the menu DIV and setting an appropriate left margin on the content DIV. No CSS positioning magic is required.

The example code I provide displays a simple 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 implementations differ only as to how the contents of the navigation menu are generated and displayed.

The External JavaScript method is very similar, except that instead of requiring an external HTML file, you can also use an external JavaScript file to generate the HTML that displays your navigation menu. The latest version of my JavaScript alternative does support using an external HTML file, and I highly recommend that method.

Rainbo Design's No-Frames Navigation System© is provided free of charge. If you use and enjoy this software, I would appreciate it if you would place the following link on your site:

a href="http://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a

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



This page was last modified on February 26, 2015



Copyright © 2005-2017 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!


  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!