Para completar este tutorial es recomendable leer antes el Tutorial Básico de CSS
¿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 transición hacia el uso de XHTML estándar y el maquetado con CSS.
Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguaje diseñado 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 añaden un número 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:
- item
- item
- 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ú básicamente ES una lista, no es un parrafo, ni un titulo, es una lista de vínculos. 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 características, 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 viñetas, ademas de un salto de línea para cada item por ser elementos de bloque.
Línea naranja delimita el margen / relleno de la lista, línea verde el bloque de cada item.
Todos estos formatos pueden ser eliminados / modificados a través de CSS muy fácilmente. Comencemos con las viñetas.
Nota: para los ejemplos usaremos una lista desordenada, ya que no necesitamos la numeración.
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.
Experimentando
Para este ejemplo, use una imagen de fondo, para el evento hover, con un pequeño 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); //Aqui solo se ve la parte de arriba de la imagen
border:1px solid #666666;
}
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 alineación a la derecha, y, como se puede ver en el código, la imagen de fondo la he puesto en el vínculo directamente, no en el evento hover, y en este solo le cambio la posición. El detalle es que la imagen es el doble de tamaño que el botón:
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 botón, en conexiones lentas, suele haber un tiempo de descarga de la imagen que supera a la ación del usuario, lo que ocasiona que nunca vea la imagen del evento hover. Con este método, 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 vínculo, 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);
}
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario