Menú de ubicación hecho con una lista y CSS

Lo primero que vamos a hacer es crear una capa y meter dentro el código html necesario para representar nuestras migas de pan. Para ello podríamos utilizar una lista de elementos asociando cada uno a una sección en la ruta de navegación, pero desde un punto de vista semántico, perderíamos la información inherente a que una sección contiene a la siguiente, no está al mismo nivel. Para una mejor representación desde el punto de vista semántico, podemos utilizar un conjunto de listas anidadas, de forma que cada miga de pan contenga una lista con la siguiente miga, y así sucesivamente.

<div id="migas">
<ul>
   <li>Portada
   <ul>
      <li>&amp;raquo; Noticias
      <ul>
         <li>&amp;raquo; Internacional
         <ul>
            <li>&amp;raquo; Oriente Medio</li>
         </ul></li>
      </ul></li>
   </ul></li>
</ul>
</div>

Con este código obtendríamos una lista típica, con las opciones marcadas por puntos y con la sangría correspondiente a su nivel de profundidad. Por supuesto, sería conveniente que cada una de las opciones indicadas, Portada, Noticias…, fuesen enlaces a las correspondientes secciones.

Ahora lo que nos queda es modificar los CSS para poner las migas en su habitual sentido horizontal, eliminando también los puntos identificativos de lista, con lo que quedará como separador el carácter especial », especificado como ».

#migas {
   background-color: #ccc;
   padding-left: 5px;
   }
 
#migas ul {
   margin: 0;
   padding: 0;
   display: inline;
   }
 
#migas ul li {
   list-style: none;
   display: inline;
   }

Puede verse como tanto los elementos ul como li se han marcado con un display: inline para que se ubiquen en modo «en línea» en vez del normal «bloque», con lo que cada lista se sitúa a la derecha de la anterior. También, mediante la propiedad list-style: none;, lo que hacemos es eliminar los marcadores de elementos de lista, con lo que el carácter » queda como separador de los elementos.

La única pega que le veo a este método es la necesidad de indicar el carácter » en cada miga de pan, algo que rompe con la recomendable separación de presentación y contenido, pero que al menos por ahora no es posible resolver de manera fácil. Hay navegadores como Firefox con los que es posible generar contenido basándonos en el pseudo-elemento li:before, perteneciente a CSS2, sin embargo esta opción no está disponible en Internet Explorer 6. Si te resistes a saltarte la regla de separar presentación y contenido, una posible alternativa sería utilizar JavaScript para, a partir del elemento «migas», hacer que a todos los elementos li (menos el primero), se les antepusiera como prefijo el carácter separador.

A continuación pongo un ejemplo de función JavaScript con la que podríamos conseguir esto. Bastaría con llamar a la función tras cerrar la capa o en el onload de la página.

function setSeparadorMigasPan()
{
   var migas = document.getElementById('migas').getElementsByTagName('li');
   for(i=1;i<migas.length;i++){
      migas[i].innerHTML = "&raquo; "+migas[i].innerHTML;
   }
}