Crear menus de navegación en CSS usando listas (2)

Las viñetas por defecto de las listas desordenas es un circulo relleno, podemos cambiarlo por un cuadrado, un circulo vacio, o una imagen, cambiando tan solo un atributo en nuestro CSS para la lista:

<ul id="navi">
<li>inicio</li>
<li>acerca de</li>
<li>contactos</li>
</ul>
<!--agregamos un ID para referirnos directamente a esta lista.-->

En el CSS:

#navi {
list-style-type:square;
}
//O bien...
#navi {
list-style-type:circle;
}
//O mas bien...
#navi {
list-style-image:url(images/vineta.png);
}

Nos da como resultado:

Los diferentes resultados del atributo "list-style".

También podemos poner:

#navi {
list-style:none;
}

Con lo que le quitamos las viñetas:

Lista sin viñetas.

Ahora vamos con los margenes y el relleno. Dado que los distintos navegadores pueden interpretar el margen y el relleno de diferente forma, hay que especificar ambos valores con los que queramos darle a nuestra lista, aunque parezca que el que trae la lista de por sí, sea el adecuado para lo que queremos, es mejor especificarlo en el CSS.

#navi {
list-style:none;
margin:0;
padding:0;
}
//luego a los elementos de la lista...
#navi li {
margin:2px;
padding:2px;
border:1px solid#CCCCCC;
}

Empieza a tomar forma.

Para continuar, vamos a agregarle vinculos a los elementos de la lista:

<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>

Ahora tendremos:

Los vinculos añaden el subrayado y el color azul.

Ahora es tiempo de decidir si queremos nuestro menu horizontal, o vertical. Si es vertical, no necesitamos agregar nada especial al código, pero si es horizontal, hay que agregar un float para hacer que los elementos de la lista se coloquen uno al lado del otro:

#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:2px;
border:1px solid #CCCCCC;
float:left; //para eliminar el comportamiento de elemento de bloque(salto de linea)
}

Y el resultado:

Lista horizontal.

Nota: al aplicar el float, los elementos de la lista se reduciran al minimo tamaño necesario para el texto que contengan.

Todos los demas estilos que queramos agregarle al menú, se harán directamente sobre los vinculos, ya sea tamaño, tipo de letra, colores, imagenes de fondo, etc. Para seleccionar los vínculos dentro de los elementos de lista, encadenamos los nombres de las etiquetas en el selector CSS como lo hicimos con los <li>:

#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
float:left;
}
#navi li a {
display:block; //Convertimos el vínculo en un bloque.
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
color:#99CC00;
background-color:#003366;
}

Así obtenemos fácilmente un menú, obviamente muy sencillo:

Un menú básico.

De aqui en adelante, cambiar todo el aspecto es cosa de ir probando, cambiando los colores, cambiando el relleno, el margen, el tipo de letra colocando bordes:

#navi li a { display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
border-left:10px solid #666666; //Agrego un borde ancho a la izquierda
}
#navi li a:hover {
color:#99CC00;
background-color:#003366;
border-left-color:#99CC00; //Luego le cambio el color al borde en el evento hover.
}

Mejorando el aspecto.

Usuarios que han visto este tema también han visto...

- Cómo eliminar el subrayado de los enlaces con CSS
- Neutralizar los estilos CSS iniciales
- Cómo evitar que una página se imprima en CSS
- Barra de desplazamiento a la izquierda con CSS
- FLOAT en CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento