Para crear menús dinámicos para nuestras páginas web es muy común hoy en día programar en HTML5 y después darle apariencia y estilo personales a través de CSS3 que se trata de un lenguaje que se basa en hojas de estilo, es decir, el código que da la forma, color y estructura a nuestra página va en un archivo aparte codificado fuera de la propia página en sí que estamos escribiendo.
En primer lugar vamos a ver cómo hacer listas, ya que a fin de cuentas un menú es una lista a la que se le pone un estilo para que quede visiblemente más elegante. De esta manera nos queda estructurado en Html como una lista de vínculos y después le ponemos un aspecto personalizado ya con CSS3.
Hay dos tipos de listas, las ordenadas y las desordenadas. Si vamos a utilizar una lista para después configurar un menú, lo más probable es que utilicemos una lista desordenada, sin embargo, vamos a ver las opciones.
Se crean exactamente igual, la única diferencia radica en la palabra reservada, que para las ordenadas será <ol> y para las desordenadas <ul>
El código en HTML es el siguiente:
<ol id="menu"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol> <ul id="menú"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul>Y el resultado en pantalla de escribir esto es:
1. Primer elemento
2. Segundo elemento
3. Tercer elemento
O exactamente igual sin el ordinal primero:
Primer elemento
Segundo elemento
Tercer elemento
En HTML hay ciertos pre-formatos cuando creamos una lista, es decir, hay un determinado margen, color de letra, viñeta, relleno, etc. que aparece por defecto al crear nuestra lista. Lo malo, es que visualmente no tiene muy buen aspecto, lo bueno es que es tremendamente sencillo cambiarlo a nuestro gusto gracias a CSS.
Vamos a empezar viendo los diferentes tipos de viñetas que podemos colocar a nuestro menú. Por defecto cada elemento de la lista viene precedido de un círculo negro. Sin embargo nosotros podemos poner cuadrados, círculos vacíos o una imagen de nuestro archivo.
El código para modificar la viñeta en CSS3 es el siguiente:
#menu
{ list-style-type:square;}
Ahí podemos poner las palabras reservadas square para que aparezcan cuadrados, circle para los círculos vacíos o una url por ejemplo, url(misimagenes/midubujo.jpg). No obstante creo que lo más habitual será que no pongamos ninguna viñeta si nuestro menú es dinámico. En ese caso la palabra a utilizar será none.
Para modificar el margen valiéndonos del menú del ejemplo es tan sencillo como utilizar este código en CSS3:
#menu
{ margin: 0px;}
Ahí en margin podemos poner el valor que queramos, y podemos elegir la medida, ya sea porcentual, en pixels, etc. Y es importante decir que en algunos navegadores o versiones de ellos puede haber problemas, por lo que se recomienda además de escribir el margen escribir el relleno. Esto se hace con padding:
#menu
{
margin: 0px;
padding: 2px;
}
Para elegir el borde de nuestro menú y de cada uno de los elementos nos fijaremos en el siguiente código de CSS3:
#menu
{ border: 2px;}
Con la palabra border podemos indicar que medida o grosor queremos. Border puede aplicarse para el borde en general, pero también podemos especificar si sólo queremos que sea un borde lateral o el borde inferior o superior. Eso se consigue añadiendo a border bottom, top, right o left.
Además del grosor border es un campo que tiene muchas posibilidades, podemos elegir un estilo, un color, un degradado… y vamos a ver algunas opciones.
Empezando por el estilo del borde, border-style, las posibilidades más utilizadas son:
Al igual que con border, con border-style podemos elegir definir el borde de un lateral, los dos, el límite superior, el inferior o todos. Si únicamente escribimos un valor, éste se pone en todos los bordes, y si escribimos en vez de una dos opciones, la primera es para los bordes de arriba y abajo y la segunda para los laterales.
Ahora bien, con esto hemos definido el borde, el tamaño y el estilo, sin embargo el menú nos sigue quedando muy simple y poco bonito visualmente hablando. Podemos querer menús verticales, como se crean por defecto, pero si queremos que sean horizontales tenemos que agregar la palabra reservada float para que cada elemento de la lista se coloque al lado del siguiente.
Explico esto con un poco más de detalle, cada elemento de la lista que hemos codificado con “li” tiene por defecto el comportamiento de elemento de bloque, es decir, después de situarse genera un salto de línea e impide que otro elemento se coloque a su lado. Si queremos colocar cada elemento de nuestra lista al lado de la anterior debemos eliminar este comportamiento de bloque.
Para ello el código sería el siguiente:
#menu
{
list-style: none;
margin: 0px;
padding: 0;
}
#menu li
{
margin: 2px;
padding: 2px;
border: 2px solid;
float: left;
}
Con esto generamos un menú y le ponemos las características básicas de margen y relleno a 0 y sin borde, y después a cada elemento encerrado en un li dentro de nuestro menú le ponemos otras características, 2px de margen y relleno, 2 px de borde sólido y que flote a la izquierda, es decir, que a su derecha se puede colocar el siguiente elemento.De esta manera ya tenemos nuestro menú en horizontal.
Ahora si queremos que nuestra lista haga las veces de menú y nos redirija a donde queramos tenemos que agregarle vínculo a nuestros elementos. Esto es muy sencillo. En nuestro código en el Html añadimos lo siguiente:
<ul id="menu"> <li><a href="#">Primer elemento</a></li> <li><a href="#">Segundo elemento</a></li> <li><a href="#">Tercer elemento</a></li> </ul>De esta forma cada elemento saldrá subrayado y funcionará como un link que nos lleva a dónde queremos ir.
Por último veremos algunas de las opciones para el aspecto.
- underline: si queremos que todo esté subrayado
- overline: igual que underline pone una línea en todo el texto, pero esta vez en vez de por debajo por encima.
- blink: Crea un texto que brilla, que parpadea como una luz de manera intermitente.
- line-through: Escribiremos esta opción si queremos que nuestro texto se encuentre tachado.
- none: esto es una redundancia ya que por defecto el texto viene con este valor, sin ningún tipo de decoración. Sin embargo, a veces nos resultará útil si queremos volver a la opción inicial después de haber utilizado algún efecto utilizando un recurso llamado hover que veremos a continuación.
- ltr: que es la que aparece por defecto en los navegadores, ya que exceptuando algunos idiomas en los que se escribe de derecha a izquierda, lo habitual es la escritura de izquierda a derecha, que es la que define esta opción.
- rtl: es la otra direccionalidad posible del texto, de derecha a izquierda que utilizaremos si queremos escribir textos árabes por ejemplo.
- medida
- porcentaje
- inherit
En ellos si utilizamos porcentaje estaremos haciendo referencia a la anchura del elemento en el que se encuentra.
También en todos ellos podemos utilizar cifras positivas o negativas de cualquiera de las unidades de medida que existen para css3, pixels, ems…
- capitalize: con esta opción se mostrará en mayúsculas sólo la primera letra de cada palabra.
- uppercase: muestra todo el texto al completo con mayúsculas.
- lowercase: muestra todo el texto al completo con minúsculas.
- none: deja el texto tal cual se ha escrito. Es el que viene por defecto.
Ahora vamos con las propiedades de la fuente.
Después tenemos que poner obligatoriamente el tamaño de la letra con “font-size” seguido opcionalmente por el interlineado que se da con “line-height” y acabando siempre con el tipo de familia de la fuente “font-family”. Por último habrá que poner uno de los valores siguientes:
- caption: para botones o listas desplegables, es decir, para los controles y los campos de formularios.
- menu: si vamos a configurar menús desplegables u otros tipos de menús.
- icon: para los textos que se muestran debajo de los iconos.
- message-box: para los cuadros de diálogo, ya sea ventanas emergentes de error, de información, etc.
- status-bar: para las barras de estado de las ventanas.
- small-caption: para campos y controles de formularios pequeños.
En la propiedad font hemos utilizado algunas otras opciones que aun no hemos visto y que explicaremos a continuación:
Otra opción es poner un color de RGB porcentual, esto simplemente es especificar tres porcentajes correspondientes a los colores rojo ®, verde (G) y azul (B):
color: rgb(22%, 76%, 14%); (Los 3 porcentajes no tienen que dar un 100%)Otra forma es mediante RGB decimal que funciona exactamente igual que el RGB porcentual pero en vez de poner tres valores en porcentaje se ponen como valores decimales:
color: rgb(114, 29, 54);De igual modo podemos elegir que nuestro RGB sea hexadecimal:
color: rgb(#23A556);
Con estas opciones ya podemos divertinos un buen rato cambiando y probando los diferentes estilos, colores y fuentes.
