Menú de un nivel con listas

CSS, HTML, SEO, MENÚ

Descripción

La barra de menús de un sitio web debe ser accesible para las personas y también para los buscadores. Para llegar a ambos lectores, debemos seguir una serie de reglas:

El menú se debe maquetar como una lista
Cada elemento de lista contendrá un enlace
Cada enlace tendrá definido el atributo 'title'

Mediante CSS podremos configurar a nuestro gusto el resto de la apariencia del menú: eliminar los bullets, cambiar a una orientación horizontal e incluso poner imágenes.
Una de las principales ventajas es que no hay necesidad de modificar el html para cambiar radicalmente el estilo.

Ejemplo

Codigo


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            /* Contenedor del menú */
            .menu_ejemplo {
                /* Ajusta el contenedor a los elementos que
                flotan en su interior */
                overflow:auto;
                _height:100%;
                /* Estilos */
                border-top:solid silver 1px;
                border-bottom:solid silver 1px;
                font-family:Verdana;
            }

            /* Tratamiento de la lista */
            .menu_ejemplo UL {
                /* Elimina el formato del UL */
                display:inline;
                list-style-type:none;
                padding:0;
                margin:0;
            }

            .menu_ejemplo LI {
                /* Elimina el formato del LI */
                display:inline;
            }

            /* Tratamiento de los hipervínculos */
            .menu_ejemplo A {
                /* Comportamiento de caja y flota a la izquierda*/
                display:block;
                float:left;
                /* Estilos */
                margin:0;
                color:navy;
                text-decoration:none;
                padding:4px 20px 4px 20px;
            }

            .menu_ejemplo A:hover, .menu_ejemplo .seleccionado A{
                /* Estilos al pasar el ratón por encima y del
                elemento seleccionado */
                color:white;
                background-color:silver;    
            }
        </style>
    </head>
    <body>
        <div class="menu_ejemplo">
            <ul>
                <li><a href="./inicio" title="Página de inicio">Inicio</a></li>
                <li class="seleccionado">
                    <a href="./blog" title="Blog de TreeWeb">Blog</a></li>
                <li><a href="./tecnologia" title="Tecnología del producto">
                    Tecnología</a></li>
                <li><a href="./contacto" title="Contacta con nosotros a través
                    de nuestro formulario de contacto">Contacto</a></li>
            </ul>
        </div>
    </body>
</html>

Copia el código y pégalo en

Referencias

Archivo html del ejemplo - http://www.treeweb.es/__archivo__/codigo/articulos/menu/menu_de_un_nivel_con_listas_v2.html

Comentarios