CSS: menu breadcrumb semantici

  • CSS
  • Gabriele Romanato

Per poter essere considerato semantico, un menu breadcrumb (a briciole di pane) deve sia avere una struttura HTML che riproduca la gerarchia delle pagine sia essere privo di separatori testuali (come >) tra le voci. Questo per un motivo molto semplice: le tecnologie assistive che usano tale menu devono poter essere aiutate a riconoscere la struttura delle pagine, evitando al contempo di dover leggere i caratteri inseriti come separatori. In questo articolo vedremo come realizzare questo tipo di menu con i CSS.

La struttura HTML presenterà delle liste annidate che ricreeranno il rapporto gerarchico e di parentela tra le pagine:


<ul id="breadcrumbs">
	<li><a href="#">Home</a>
	
	  <ul>
	  
	     <li><a href="#">Articoli</a>
	     
	       <ul>
	       
	       		<li><strong>Articolo</strong></li>
	       
	       </ul>
	     
	     
	     </li>
	  
	  </ul>
	
	</li>
</ul>

Con i CSS utilizzeremo il floating per allineare gli elementi e un'immagine di sfondo sui link per visualizzare il separatore tra le voci:


#breadcrumbs {
	margin: 1em;
	padding: 0;
	font: 100% Arial, sans-serif;
	list-style: none;
	overflow: hidden;
}

#breadcrumbs > li {
	float: left;
	margin-right: 0.5em;
}

#breadcrumbs li ul {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

#breadcrumbs li ul li {
	float: left;
}

#breadcrumbs a {
	float: left;
	padding-right: 19px;
	background: url(separator.png) no-repeat 100% 0;
	padding-left: 0.5em;
	color: #338;
}

#breadcrumbs strong {
	float: left;
	padding-left: 0.5em;
}

Potete visionare l'esempio finale in questa pagina.

Torna su