Lav bread crumbs med javascript

Siden er opdateret 7. 5. 2005

Kan du hverken bruge asp eller php på din server, er du ikke dermed afskåret fra at lave 'bread crumbs'-navigation på dine sider. Dog vil jeg anbefale asp- eller php-løsningen, hvis du kan. Har dine brugere slået afvikling af javascript fra på deres browsere, virker denne sides løsning nemlig ikke.

Skal det være javascript, laver du denne kode på en helt blank fil, som du gemmer under navnet crumbs.js:

function makeBreadCrumbPath(frontPageName,divider) {
 frontPageName = frontPageName ? frontPageName : "Home";
 divider = divider ? divider : ">";
 var parts = location.pathname.split("/");
 var crumbs = new Array();
 // front page
 var curPath = "/";
 crumbs[0]="<a class='crumb' href='/'>" + frontPageName + "<\/a>";
 // crumbs on path
 for(var i=1;i<parts.length-1;i++) {
  curPath += parts[i] + "/";
  crumbs[i] = "<a class='crumb' href=\"" + curPath + "\">" +
   parts[i].charAt(0).toUpperCase() +
   parts[i].substring(1) +
   "<\/a>";
 }
 // this page
 crumbs[i]="<span style='font-size:10px;fontcolor:#666'>" + document.title + "<\/span>";

 var crumbpath = crumbs.join(divider);
 return crumbpath;
}

document.write("Du her her: "+makeBreadCrumbPath("Forsiden"," - "));

Derefter laver du på det ønskede sted på dine sider denne kode:

<script type="text/javascript" src="crumbs.js"></script>

Du skal selvfølgelig også have lov til at se koden brugt i praksis:


Du er nu næsten klar med din bread crumb navigation. Der mangler bare lige en enkelt lille detalje, før det hele fungerer. Hvis du holder markøren hen over 'bread crumb'-linjen øverst på denne side, vil der ved de første to stumper tekst (Forsiden og scripts) i statuslinjen komme til at stå:

   http://hjemmesideskolen.dk/
   http://hjemmesideskolen.dk/scripts/

Disse to ord fungerer altså som links til mapper. Men for at det kan virke som links til faktiske sider, skal der i mapperne ligge en side, der har det serverbestemte defaulte navn. Når jeg skriver 'serverbestemte', er det fordi der ikke er nogen fast regel for, hvad denne side skal hedde. Jeg kan give nogle eksempler:

Azero (her ligger Hjemmesideskolen) - muligheder i nævnte prioritetsrækkefølge:
default.php, default.php, default.shtml, default.html, default.htm,
index.php, index.php, index.shtml, index.html, index.htm
UnoEuro - mulighederne afhænger af valgt servertype:
index.php, index.shtml, index.html, index.htm eller
index.php, index.html, index.html
CyberCity gratis plads
home.html, home.htm
TDC home gratis plads - muligheder i nævnte prioritetsrækkefølge:
index.html, index.htm

Du må med andre ord tjekke hos dit web-hotel, hvad siden skal hedde.

Når du har fundet ud af, hvad siden skal hedde, er det blot at lave en helt tom side, der laver en øjeblikkelig viderestilling til en at dig valgt side, f.eks. forside.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Denne side er flyttet!</title>
<meta http-equiv="Refresh" content="0;URL=forside.html">
</head>
<body>

<h1>Denne side er flyttet!</h1>

<p>Du vil automatisk blive overført.</p>

<p>Husk at forny dine bogmærker til:<br>
<a href="forside.html">forside.html</a></p>

</body>
</html>

... den komplette kode, kopier og lav din egen version med den rigtige adresse.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2004
Hjemmesideskolen
Du er her: Forsiden - scripts - Lav bread crumbs med javascript
Brugere lige nu: Antal aktive brugere
Home Mail