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

Los menús de ubicación podemos verlos en muchas webs indicándonos en qué sección estamos y cuáles son las secciones superiores, permitiéndonos acceder mediante un clic a cualquiera de ellas, por lo que muchas veces se denominan menús de migas de pan o bread crumbs, en clara analogía al cuento infantil de Hansel y Gretel. Son una de esas cosas que aun pese a su sencillez, marcan la diferencia muchas veces entre webs bien diseñados y estructurados, de los que no lo son, puesto que proporcionan al usuario en todo momento una representación visible de cuál es su ubicación en el web, permitiéndole moverse por él.

Portada del web --> página de sección --> página de subsección

En las siguientes líneas voy a explicar cómo realizar estos menús mediante elementos

  • 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 &raquo;.

    #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;
       }
    }
  • Twitter Digg Delicious Stumbleupon Technorati Facebook Email

    3 Respuestas para “Menú de ubicación hecho con una lista y CSS”

    1. permiteme citar tu post

      saludos cordiales

      Liam

    2. Muy bueno, me ayudó mucho.

    Trackbacks/Pingbacks

    1. Diseño Gráfico :: Menú de ubicación hecho con una lista y CSS :: August :: 2006 - 24. Ago, 2006

      […] Les gusta el CSS ? aquí­ tiene un codigo en el cual podrán realizar un menú atractivo, pero sobretodo muy funcional, visto en ES LO MAS. Los menús de ubicación podemos verlos en muchas webs indicándonos en qué sección estamos y cuáles son las secciones superiores, permitióndonos acceder mediante un click a cualquiera de ellas, por lo que muchas veces se denominan menús de migas de pan o bread crumbs, en clara analogí­a al cuento infantil de Hansel y Gretel. Son una de esas cosas que aun pese a su sencillez, marcan la diferencia muchas veces entre webs bien diseñados y estructurados, de los que no lo son, puesto que proporcionan al usuario en todo momento una representación visible de cuál es su ubicación en el web, permitiéndole moverse por él. […]