Menu de Navegación con CSS y XHTML

4 07 2007

Una buena política de codificación de páginas que usen CSS y XHTML es importante para los motores de búsqueda y la accesibilidad. Aquí está, en un documento traducido del original: Site Navigation in CSS y HTML, el punto de vista de un buen amigo mío, aunque, en palabras de él mismo, siempre está dispuesto a escuchar otras opiniones. También, si no se está interesado en la explicación, puede verse la demo directamente o descargar el código funte, desde su sitio web.

El lenguaje HTML, actualmente, no tiene ninguna sintáxis de navegación semántica. HTML 5 está proponiendo “navegar” con significado. Pero, actualmente, como diseñadores no contamos con estas herramientas y debemos trabajar con lo que esté a mano. El método propuesto aquí a resultado funcionar muy bien, tiene un buen rendimiento y sencillo de interpretar para los motores de búsqueda.

Utilizando elementos comunes

Para entender bien este punto, debemos recordar que existen elementos para definir las cabeceras de un documento. Me refiero a las etiquetas H1 … H6, que son utilizadas para definir titulos. Algunos sitios, utilizan imágenes con el logotipo del proyecto, sitio o compañía para indicar al navegante que presionando sobre el mismo, regresará a la página de inicio. De parte de los programadores, tenemos el uso de listas para la creación del menú de navegación. Este es un buen método, recomendado por muchos expertos.

<div id = "header">
    <h1>
        <a href = "/" title = "Return to the Home Page">Your Company
                                                        Name </a>
    </h1>
    <ul>
        <li><a href = "/">Home</a></li>
        <li><a href = "/about-us">About Us</a></li>
        <li><a href = "/services">Services</a></li>
        <li><a href = "/portfolio">Portfolio</a></li>
        <li><a href = "/contact">Contact</a></li>
    </ul>
</div>

Con simplemente, copiar el código anterior, no puede apreciarse realmente el potencial del uso de listas para dibujar el menú de navegación. El codigo así, solamente es útil para el motor de búsqueda. Ahora, con CSS podremos apreciar como cambia la apariencia:

#header {
    width: 760px;
    float: left;
    background-color: #000;
}
#header h1 {
    float: left;
    font-size: 1em;
    text-indent:-9999px;
}
#header h1 a {
    width: 150px;
    height: 75px;
    background: #000 url(../images/logo.png) top left no-repeat;
    float: left;
    text-decoration: none;
}
#header ul {
    float: right;
    list-style: none;
}
#header li {
    margin-right: 0.1875em;
    display: inline;
    float: left;
    text-align: center;
    font-size: 1.6em;
}
#header li a {
    display: block;
    padding: 0em 0.625em 0.3125em 0.625em;
    color: #000;
    background-color: #ccc;
    text-decoration: none;
}
#header li a:hover {
    background-color: #fff;

    color: #000;
}

El comportamiento predeterminado de los elementos de una lista, es dibujarse hacia abajo, pero con el atributo float: left hará que todos se dibujen horizontalmente.


Acciones

Information

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: