Here is the javascript that I use for the navigation breadcrumb links below the above navigation links. It is a very reliable javascript. I have used this script for years, and I have tweaked it for years. Sorry, I do not remember the original source. If you know, please email me.
Create a .js file with the following code. Link to it in the head of your documents with
<script src="filename.js" type="text/javascript"><!--mce:0--></script>
Now follows the script contents for “filename.js”
// JavaScript Navigation Trail // Laura B. Dahl // www.edtechblog.org // In this section, the actual folder name is in the square brackets, // and the alias is in the quotes to the right. var trailMenu = new Object(); trailMenu["admin"] = "Admin"; trailMenu["classes"] = "Classes"; trailMenu["gradschool"] = "Graduate School"; // This is the script that runs the breadcrumbs. // It automatically finds the folders and renames them // according to the array above. function makeTrailMenu() { var parseStart, volDelim, parseEnd; var output = "<span style="padding: 6px; font-size: 12px; font-variant: small-caps; font-family: Arial,Helvetica,sans-serif; color: #333333;">"; var linkStyle = "color: #647E84; font-variant: small-caps;"; var path = location.pathname; var separator = " ยป "; var re = /\\/g; path = path.replace(re, "/"); var trail = location.protocol + "//" + location.hostname; var leaves = path.split("/"); if (location.protocol.indexOf("file") != -1) { parseStart = 1; volDelim = "/"; } else { parseStart = 0; volDelim = ""; } if (leaves[leaves.length-1] == "index.php" || leaves[leaves.length-1] == "index.htm" || leaves[leaves.length-1] == "index.html") { parseEnd = leaves.length -1; } else { parseEnd = leaves.length; } for (var i = parseStart; i < parseEnd; i++) { if (i == parseStart) { trail += "/" + leaves[i] + volDelim; output += "<a>"; output += "Home"; } else if (i == parseEnd - 1) { output += document.title; separator = ""; } else { trail += leaves[i] + "/"; output += "</a><a>"; output += trailMenu[leaves[i]]; } output += "</a>" + separator; } output += "</span>"; return output; }
Next, place the following code in the location where you want your breadcrumb links to reside. Wrap a div tag around this code to position and add margins & padding. You will also want to style the default text of the page name with the following code in the .js file:
var output = "<span style="padding: 6px; font-size: 12px; font-variant: small-caps; font-family: Arial,Helvetica,sans-serif; color: #333333;">"; </span>
Then style the links with the following line in the following line in the .js file:
var linkStyle = "color: #647E84; font-variant: small-caps;";
One Comment
Thanks for this. I know I will use this at some point. . .