Herbruikbare kruimelpaden of breadcrumbs: de HTML en CSS opmaak

Broodkruimelnavigatie (breadcrumb of kruimelpad) is een handige en visuele manier om de bezoeker duidelijk te maken waar hij zich precies bevindt op een hiërarchisch ingedeelde website.

Ons doel is, om de broodkruimel zo semantisch mogelijk in HTML op te maken. Er is alleszins al genoeg over gediscussieerd, lees er maar SimpleQuiz part XII eens op na. De algemene conclusie daar was dat je semantisch gezien het best opteert voor geneste ongenummerde lijsten. In de praktijk leek dat echter minder haalbaar vanwege de vrij complexe HTML structuur.

Het is dus zoeken naar een evenwicht tussen semantiek, praktische eenvoud en de toegankelijkheid van de gebruikte HTML.

Daarom hanteren wij voor breadcrumbs steeds volgende HTML opmaak:

<div id="breadcrumb">
   <strong>Je bent hier<span class="hide">:</span></strong>

   <span class="hide"> van </span>
   <a href="#">Startpagina</a>

   <span>naar</span>
   <a href="#">Kinderboeken</a>

   <span>naar</span>
   <a href="#">Prinses</a>

   <span>naar</span>
   <em>De avonturen van prinses</em>
</div>

Wanneer je de CSS styling uitzet, lees je dit:

Je bent hier: van startpagina naar kinderboeken naar prinses naar de avonturen van prinses

Met die HTML markup heb je trouwens voldoende ankerpunten om het via CSS bijvoorbeeld op volgende manieren te stylen:

De CSS ziet er in het geval van Poncha zo uit:

#breadcrumb {
   margin: 0 0 20px 0;
   padding: 27px 0 0 20px;
}

#breadcrumb strong {
   float: left;
   padding-right: 25px;
   color: #6589a5;
   background: url(/img/sprite.png) no-repeat 100% -280px;
}

#breadcrumb a {
   float: left;
   text-decoration: none;
}

#breadcrumb a:hover { text-decoration: underline; }

#breadcrumb span {
   float: left;
   width: 25px;
   text-indent: -999em;
   background: url(/img/sprite.png) no-repeat 100% -280px;
}

#breadcrumb em {
   float: left;
   font-style: normal;
   color: #e2007a;
}

/* Generic hide */
.hide {
	position: absolute;
	display: block;
	padding: 0 !important;
	text-indent: -999em ;
	font-size: 0px;
	height: 0px !important;
	line-height: 0px !important;
	background: none !important;
}

De class=”hide” kan je hangen aan die onderdelen die niet moeten getoond worden, bijvoorbeeld het U bent hier gedeelte, of het :-teken.

Concreet is de HTML voor alle voorbeelden steeds dezelfde (op de hide class na) en is het gewoon de CSS die, zij het lichtjes, varieert naargelang het design van de website.

• Toegevoegd op: 25 May 2009
• Geschreven door: davy
• Tags: breadcrumbs, CSS, html, kruimelpad, opmaak, semantiek, technieken

• Reageer
• Permanente link
• Reacties (4)
• Links naar dit artikel

Reageer op dit artikel

Naam *

E-mail * (wordt niet gepubliceerd)

Website

Reactie