|
|
|
   |
What are Breadcrumb trails?
'Breadcrumb trails' are those strings of links and arrows you see at the tops of some web pages. They provide a clue as to where you are in the website, how you got there, and how to get back. They usually look something like this:
|
The breadcrumb trail:
|
|
|
|
|
There are two main types of breadcrumb trails: Historical and Hierarchal.
Historical breadcrumbs are a list of the previously visited web pages in the order they were last seen. Internet Explorer doesn't let us access the URL strings in the History() array, so we would have to build our own. That's a bit more involved than listing the pages in a hierarchy, and it's not as helpful to the user, anyway.
Therefore, most breadcrumb trails are Hierarchal. Let's talk about those.
Hierarchal breadcrumbs are based on the Table of Contents, the directory structure, or an array designed by the site author. Sometimes, they're all the same thing.
Either way, we need to keep track of each page's place in the hierarchy, or 'taxonomy tree'. This information can be maintained either within each page, or in a single, modular .js file.
Keeping the data in the files page-by-page is high-maintenance, and is better suited for smaller help files, ebooks, and sites that don't change frequently. Any more than a few pages become difficult to maintain, and require a modular solution.
Include files use global rules for all pages. One method is to acquire the current path and filename, parse the path components, and compare them to an existing array. We display the topic name or category that is associated with that path.
Advantages of this script:
§ Only one include file is used.
§ Only the directories require entries, as…
§ The individual pages identify themselves from their <TITLE> tag.
Download the Hierarchal Breadcrumbs Script:
(Right-click and select 'Save Target As…'.)
Some things to know before using the script:
ü The script creates the breadcrumb hierarchy based on the directory tree.
ü This tree should be based on the Table of Contents (a generation configuration available with MacroMedia's RoboHelp and RoboHtml).
ü Each directory name must be unique.
ü Each web page must have a <TITLE> tag.
ü This script will display up to five levels (seven, if you count 'Home' and the current page).
To adapt the script to your site:
ü Replace all instances of 'http://www.copperfieldpub.com' with your own home or start page.
ü Add another line for each new directory and subdirectory into the Crumb Arrays. Add these three elements for each new directory:
§ Path: the single directory name
§ Name: the user-friendly text you want to display onscreen
§ Url: the full URL to the parent page for this directory or book
And now you have your Automated Breadcrumbs in a single .js file. When you add a new directory, be sure to add the corresponding 'Crumb' entry into your 'breadcrumbs' array.
And if you use this very useful script on your website or other publication, be sure to provide credit to Copperfield Publishing, and a link to us somewhere in there, please.
|
|
|
|
|