MENU

Qu son las listas?, Para qu se usan?, Por qu ES MEJOR usarlas en un

men? Estas son preguntas que siempre vienen a la mente al hablar de las
listas, sobre todo en la transicin hacia el uso de XHTML estndar y el
maquetado con CSS.
Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el
XHTML es un lenguaje diseado para estructurar datos, y eso es lo que
debemos hacer con el. En ese sentido, las listas nos ofrecen una muy buena
forma de estructurar, pues...listas.
En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la
unica diferencia es que las ordenadas aaden un nmero correlativo a cada
item de la lista, mientras que las desordenadas no:
Las Listas Ordenadas:
<ol>
<li>item</li>
<li>item</li>
<li>item</li>

</ol>
Nos da como resultado:
1.

item

2.

item

3.

item

Mientras que, las listas desordenadas:

<ul>
<li>item</li>
<li>item</li>
<li>item</li>

</ul>
Nos queda:

item

item

item

Ahora la gran pregunta, Por qu &%$#$@/ tengo que usar eso para hacer mi
men?
Sencillo, porque un men bsicamente ES una lista, no es un parrafo, ni un
titulo, es una lista de vnculos. Y como lista que s, lo mas correcto es que est
estructurada en el HTML como tal.
Pero no hay de que preocuparse, ya que el CSS nos permite cambiar
completamente el aspecto de la lista, para convertirla en el bonito men que
queremos, sin que deje de ser lista. Pero primero, veamos en qu consisten
los pre-formatos que trae de por s una lista.
Las listas se renderizan en el navegador con ciertas caractersticas, como el
margen / relleno (interpretado de diferente manera en los distintos
navegadores) de la lista completa, el margen / relleno (idem) de cada item de la
lista y las vietas, ademas de un salto de lnea para cada item por ser
elementos de bloque.

Lnea naranja delimita el margen / relleno de la lista, lnea verde el bloque de cada item.

Todos estos formatos pueden ser eliminados / modificados a travs de CSS

muy fcilmente. Comencemos con las vietas.
Nota: para los ejemplos usaremos una lista desordenada, ya que no
necesitamos la numeracin.
Las vietas 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".

Tambin podemos poner:

#navi {
list-style:none;
}
Con lo que le quitamos las vietas:

Lista sin vietas.

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 aaden 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 cdigo, 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

tamao necesario para el texto que contengan.
Todos los demas estilos que queramos agregarle al men, se harn
directamente sobre los vinculos, ya sea tamao, tipo de letra, colores,
imagenes de fondo, etc. Para seleccionar los vnculos 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 vnculo 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 fcilmente un men, obviamente muy sencillo:

Un men bsico.

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.

Experimentando

Para este ejemplo, use una imagen de fondo, para el evento hover, con un
pequeo truco, veamos el codigo:
ul li a {
display:block;
width:100px;
padding:40px 10px 4px 10px;
text-decoration:none;
text-align:right;
font-size:11px;
color:#666666;
background-image:url(images/boton1.png);
solo se ve la parte de arriba de la imagen
border:1px solid #666666;
}

//Aqui

ul li a:hover {
color:#000000;
background-position:bottom; //Aqui muestro la parte
de abajo de la imagen
}
Para hacer los botones altos, le he agregado 40px de relleno superior, de esta
forma agrando el boton dejando el texto abajo, le he cambiado la alineacin a
la derecha, y, como se puede ver en el cdigo, la imagen de fondo la he puesto
en el vnculo directamente, no en el evento hover, y en este solo le cambio la
posicin. El detalle es que la imagen es el doble de tamao que el botn:

Una sola imagen con ambos estados.

Por qu hago esto? La idea es cargar una sola imagen, y hacerlo al cargar la
pagina, si pedimos que en el evento hover se cargue una imagen aparte, esta
solo sera cargada al poner el cursor encima del botn, en conexiones lentas,
suele haber un tiempo de descarga de la imagen que supera a la acin del
usuario, lo que ocasiona que nunca vea la imagen del evento hover. Con este
mtodo, nos aseguramos que la imagen es cargada desde el principio y no hay
espera.
Otro ejemplo

Solo imagenes.

Para este ejemplo, hay varios cambios, comenzando por la lista:

<ul>
<li><a href="#" id="inicio"><span>inicio</span></a></li>
<li><a href="#" id="acerca"><span>acerca
de</span></a></li>
<li><a href="#"
id="contacto"><span>contactos</span></a></li>
</ul>
Agregamos un identificador nico a cada vnculo, para poder colocar la imagen
correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto, para
ocultarlo con CSS:
ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
padding:0;
float:left;
ul li a {
display:block;
width:121px;
height:50px; //Quito el padding, pero le pongo
altura.
text-decoration:none;
}
ul li a:hover {
background-position:bottom;
}
ul li a span {
display:none; //Oculto el texto.
}
#inicio {
background-image:url(images/inicio.png);
}

#acerca {
background-image:url(images/acerca.png);
}
#contacto {
background-image:url(images/contacto.png);
}
Por ahora es todo, a disfrutar y a hacer las respectivas pruebas.

Crear un men
horizontal simple
con CSS
Usaremos listas para crear este men horizontal. Consta de 8 enlaces (por
defecto, podemos incluir cuantos queramos):

Cdigo HTML
<ul id=button>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Services</a></li>
<li><a href=#>Clients</a></li>
<li><a href=#>Products</a></li>
<li><a href=#>F.A.Q</a></li>
<li><a href=#>Help</a></li>
<li><a href=#>Contact Us</a></li>
</ul>

Pero claro, este men no tiene estilo (CSS). Sin estilo se muestra as:

Cdigo CSS
Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se
llamar button:
#button {
padding: 0;
}

El cdigo anteriormente expuesto eliminar el padding que pueda haber por

defecto en la lista de elementos.
Como vamos a crear un men horizontal, la lista deber ser horizontal, as que
diremos que se dispongan en lnea (display: inline):
#button li {
display: inline;
}

Nos quedar algo parecido a esto:

Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaos del
men (a nuestro gusto, claro est):
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}

Y el men va quedando de esta manera:

Vamos a aplicar un efecto :hover al mover el ratn encima de un elemento de la
lista (men). Ntese la diferencia de padding, margin y color de fondo que
mostraremos:
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}