quick-nav.pl: A perl program that emits three styles of navigation, given a categorized list of URLs

If the live examples do not run, try using the static examples.

Example 1 - Tables Static
Example 2 - DHTML Static
Example 3 - Two frames Static

Get the program:

quick-nav.pl

Usage Guide:

Five control tables are used to maintain a collection of categorized links and describe how to present them to a user. Name value arguments are used to indicate where to obtain and how to layout the categories. Name value arguments are communicated to a script in this manner <URL to script>?<name>=<value>&<name>=<value>... This is the exact same manner as an HTML form post action.

Control table names are structured as <datasource><cfg><control-table-name>.

Name Value arguments (all arguments are optional and case insensitive)

Name Value
datasource= URL prefix to location of configuration files. Default is folder quick-nav/ below the script
cfg= a prefix to use when accessing control tables, default is null
mode= tables (default)
dhtml
twoframe
target= dhtml mode target frame
serverRoot= string to place in front of links that do not have // in them.
This comes in handy when laying out links that are on one server, but the server name could change over time (especially useful when using free web hosting.)

Control tables - case sensitive

1. {datasource}{cfg}section               recommended
2. {datasource}{cfg}sectionDetail         recommended
3. {datasource}{cfg}css                   optional
4. {datasource}{cfg}prenav                optional
5. {datasource}{cfg}postnav               optional
	 

These five tables are expected to come from location {datasource}{cfg}.
If {datasource} is not specified as an argument the tables would be expected at quick-nav/{cfg}{table-name} below the cgi-bin path where the script is installed.
If {datasource} is specified there are several interesting values it can take on:


section

Format:
<section id> <tab> <display order> <tab> <text to display>

This data is the section headers. Each section id should be unique. Display order is presently ignored. The text that is displayed from this data is assigned a style class of sectionHeader.

Sample:
10	1	Papers
20	2	Software
30	3	Links

sectionDetail

Format:
<section id> <tab> <display order> <tab> <text to display> <tab> <link address> <tab> <image address>

This data organizes the links. There should be several details per section. An image can be placed after the link for further beautification. The image address is optional. Display order is presently ignored. The text that is displayed from this data is assigned a style class of sectionDetail.

Sample:
10	1	NESUG 1999	papers/nesug-1999/NESUG-1999.pdf
10	2	NESUG 1996	papers/nesug-1996/NESUG-1996.pdf
10	3	NESUG 1995	papers/nesug-1995/NESUG-1995.pdf

20	1	Persistent Progress Bars	downloads/ppb/index.html
20	2	Tournament Scheduler	downloads/round-robin/index.html
20	3	Getting the IP Address	downloads/sas/samples/windows-ipaddress.sas
20	4	Quick-Nav	perl/quick-nav/

30	1	SAS Institute	http://www.sas.com/	http://www.sas.com//images/global/hdd_rt.gif
30	2	Google	http://www.google.com
30	3	Apache	http://www.apache.org
30	4	Perl	http://www.perl.org

css

Format:
<URL to css file>

This data is the location of the css file for formatting the generated document. At a minimum the css should define attributes for custom styles named .sectionHeader and .sectionDetail

Sample:
http://www.devenezia.com/css/quick-nav.css


Sample of css:

BODY {
  background-color: rgb(0,100,167);
}

A:link {
  color: #000000;
  text-decoration: none;
}

A:visited {
  color: #000000;
  text-decoration: none;
}

A:active {
  color: #000000;
  text-decoration: none;
}

A:hover {
  color: white;
  text-decoration: none;
}

.sectionHeader {
  color: white;
  background-color: rgb(0,110,177);
  padding-left: 4px;
  font-family: sans-serif;
  font-size: large;
  font-style: italic;
  border:1px solid rgb(0,90,157);
}

.sectionDetail {
  color: #F0F0F0;
  background-color: rgb(0,110,177);
  font-family: sans-serif;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 6px;
  border:1px solid rgb(0,90,157);
}

.sectionDetail:hover {
  color: black;
  background-color: rgb(0,130,197);
}

prevnav

Format:
<HTML fragment to put before the navigation>

Only include tags that would occur within a HTML body.

Sample:
<H3>Interesting <I>tidbits</I></H3>

postnav

Format:
<HTML fragment to put after the navigation>

Only include tags that would occur within a HTML body.

Sample:
<HR>
<H3>Post navigation narrative</H3>
<A HREF="/contact.php?subject=Regarding the navigation scheme">Comments?</A>
<ADDRESS>This is important stuff</ADDRESS>

Copyright 2000 Richard A. DeVenezia
This page was last updated 11 June 2003.