Web Site Navigation System: Textual

I've done several variation of this script over the years. This version is the navigation system used by this site. The script displays a navigation bar, usually at the top of the page, consisting of textual links to other sections on the web site. I've found that using text only to be more reliable and quicker than using images (more on that in the image version of this script).

The script works its way through a set of arrays containing the text to display and the URL for each link. It also uses different colours picked up from a sequence of styles from a Cascading Style Sheet (CSS). Note that the effect is slightly different in Microsoft Internet Explorer than Netscape Navigator due to font handling.

One trick that the script does for non-frames views is that it only displays the text of the current section that the calling page is in (passed via an argument) and does not make it a link ('cos the viewer is already there!). By passing a null section name, such as what this page does, all of the sections are displayed as links. This isn't done for a navigation frame since the calling page (the one in the navigation frame) isn't the same as the viewing page (the one called up by the navigation page into a different frame).

When using a frame navigation system, it is possible to specify the target frame for each link.

There is one more trick that this script does which is worth knowing about because I haven't seen anything like this documented anywhere. The 'main' function in the script adds a hidden field to the page with a value 'n'. If the visitor is not using frames then this page is the top (parent) frame in the browser. If they are using frames, one of which is used for navigation around the site, then placing a similar named field in the top level frame (i.e. the page that loads the sub-frames) will overwrite this with a value of 'y'. Hence our script can now detect whether the visitor is using a navigation frame in which case there is no need to display a navigation bar. The links for the navigation frame is also generated by a similar function in the script!.

Example

This script is used on all pages of this site. Use your browser's 'View Source' command to view the page, the script is invoked by the show_header() call at the start of the page. View the web development page in non-frames mode to see how the current section of a page is not made into a link.

Try clicking on the following link to use frames and see how links can be targetted at different frames - Home will zap all frames and load itself as the top and only frame, Feedback will display itself in a new window, the other pages will be displayed in the right hand frame.

Click here to see how this script behaves when a navigation frame is used to view this page. Use your browser's 'View Source' command to view the navigation frame.

Click here to view the page without frames.

Click here to download the script

Click here to download the CSS stylesheet