Español
English
Página de Portada
|
Documento HTML. |
| Ejemplo de la creación paso a paso de un menú horizontal con pestañas (tab menu) con listas HTML y formateado visualmente con CSS. | |
| Autor: Wmasterfacil | www.wmasterfacil.com |
| Vamos a crear un menú horizontal de pestañas o solapas (tab menú en inglés) con listas, con HTML y CSS. | ||
| Primero crearemos la lista con los elementos del menú en el fichero html. Como en el otro tutorial, he puesto titulares a las pestañas, para que se vea mejor. | ||
| He utilizado un div para introducir nuestro menú, que lo he llamado con el identificador "cajamenu". También he creado un identificador para la lista UL que contiene los elementos de nuestro menú. Le he llamado "menuh". De momento estos nombres no nos sirven de nada, pero eso va a cambiar pronto. | ||
 | ||
| El resultado se ve en este EJEMPLO 1. | ||
|
| ||
| Ahora vamos a ir formateando con CSS. Voy a hacerlo en un fichero aparte. Al final explicaré el motivo. | ||
| El código del fichero .CSS es el siguiente: | ||
 | ||
| Y el del fichero HTML es el mismo, excepto que he añadido después de la línea TITLE en el HEAD, la línea: | ||
< link href="misestilos.css" rel="stylesheet" type="text/css" > | ||
que realiza la llamada al fichero de estilos CSS. | ||
Hemos dado color al fondo de la página. Un naranja intenso. También hemos inicializado los márgenes y rellenos a 0. Esto en el BODY. | ||
En la caja que va a contener el menú (cajamenu) hemos definido: | ||
| La hemos posicionado de forma absoluta y le hemos dado de altura 29 pixeles y de anchura, el 100%. Este último valor podéis ajustarlo a un tamaño fijo, si queréis. Yo lo he hecho así porque quiero que el efecto de una hoja dentro de mi Web, bajo el menú, llegue al final de la pantalla. Luego lo veréis mas claramente. | ||
| También hemos definido la familia de fuentes, y la posición (TOP, LEFT) y he generado un borde inferior en negro. | ||
| Si os fijáis bien en la ejecución del EJEMPLO 2 (el link está más abajo) , veréis que el subrayado no se inicia desde el borde izquierdo de la ventana. Esto es por el posicionamiento a la izquierda LEFT: 10px. Así nos quedará un margen lateral izquierdo de 10 pixeles (nuestra hoja partirá desde ahí hacia la izquierda). | ||
Ahora vamos a formatear la lista no ordenada (UL) que contiene a nuestro menú, que tiene de nombre "menuh". | ||
| Le eliminamos el LIST-STYLE para que no salgan las viñetas y le colocamos los márgenes superior e izquierdo. El superior a 10 pixeles para que nos quede el mismo hueco sobre el menú que a la izquierda (como habíamos declarado en la caja del menú). El margen izquierdo lo he desplazado 30 pixeles para que el primer elemento del menú no salga pegado al margen izquierdo de la hoja del documento (esto se ve ahora en que la palabra INCIO no está alineada al borde inferior que hemos puesto, sino que está desplazada a la izquierda). | ||
Por último cada elemento de lista (UL#menuh LI) de nuestro menú (cada una de las pestañas) le aplicamos el FLOAT: LEFT para que cada elemento de la lista flote hacia la izquierda, con lo que los va poniendo consecutivamente uno al lado del otro. | ||
Éste es el resultado del EJEMPLO 2 | ||
| Antes de seguir perfeccionando nuestro menú, vamos a hacer la hoja del documento, para que veáis bien los motivos para los márgenes y desplazamientos del menú. Para ello, voy a crear otro DIV, llamado "cajahoja" que va a contener los datos de cada pestaña del menú, es decir, los contenidos que queramos poner. | ||
| Este DIV lo sitúo inmediatamente dejado del DIV del menú, en nuestro documento html. El código quedaría así: | ||
 | ||
Ahora declaramos el identificador "cajahoja" en nuestro fichero css y le damos atributos. | ||
 | ||
Lo posicionamos 30 pixeles hacia abajo (fijaros que la caja del menú tenia 29 pixeles de altura) y 10 pixeles a la izquierda (para hacerla coincidir con el inicio del borde inferior de la caja del menú). | ||
| La coloreamos de blanco y le damos la máxima altura y anchura. | ||
| Por último, le hacemos un borde igual que el que antes le dimos a la caja del menú, pero esta vez a la izquierda. | ||
| Este EJEMPLO 3 muestra el resultado. Ahora sí que ya se ve el efecto de una hoja dentro de nuestro fondo naranja. | ||
| Ahora, como los elementos de nuestro menú (las pestañas) son hipervínculos, vamos a formatear las etiquetas A de nuestra lista. | ||
| Para ello declaramos la etiqueta UL#MENUH LI A y le añadimos las opciones que mas nos gusten: | ||
| La definimos como bloque (DISPLAY: BLOCK) para que todo el elemento forme parte del hipervínculo y no solo el texto. | ||
| Le damos altura y anchura, color de fondo (un naranja muy clarito), le quitamos la decoración del texto (el subrayado), alineamos el texto al centro y verticalmente (esto último con el padding), le damos tamaño a la letra y definimos los bordes del elemento (el inferior no, porque no hace falta, ya que lo habíamos definido al principio para toda la caja). | ||
Fijaos en el detalle de la altura del elemento: 15 pixeles. A estos 15, le sumamos el píxel del borde superior y los 3 del padding y me dan los 19 píxeles de altura de la caja del menú (19 + 10 que la bajamos con el margin-top: 10px de la definición del UL#MENUH nos dan los 29 pixeles de "cajamenu"). | ||
Por ultimo definimos la etiqueta UL#MENUH LI A: HOVER para cambiar la visualización de aquellos elementos sobre los que pasemos el cursor. Le cambiamos el color del fondo (rojo oscuro) y de la letra. | ||
| El código resultante es el siguiente: | ||
 | ||
| Y el resultado se ve en la ejecución del EJEMPLO 4 | ||
| Bien. Ahora ya está casi terminado. Pero el efecto de pestaña no se ve como a mi me gusta. Yo lo que busco es que para la pestaña activa, que ésta se vea como parte de la hoja. | ||
| Para ello, voy a declarar una clase nueva que se llame "activo". Y voy a modificar mi primer elemento de la lista, el INICIO, quitándole la propiedad de hipervínculo y asignándole esta nueva clase. De esta forma, ese elemento del menú no será ya un hipervínculo y se regirá por las propiedades de visualización que le demos a nuestra nueva clase "activo". | ||
| El código HTML queda ahora así: | ||
 | ||
A la hora de definir nuestra clase "activo", la voy a definir exactamente igual que a los demás elementos hipervínculos de la lista de nuestro menú (UL#MENU LI A). Solo voy a cambiar, el color del fondo y de la letra y ATENCIÓN, le voy a dar un píxel más de altura (16 px en vez de 15 px). | ||
| ¿Por qué hago esto último? Pues porque ese píxel "pisará" el borde inferior para ese elemento y así la pestaña (ahora de color de fondo blanco) estará unida a la hoja de datos. | ||
| El fichero CSS queda ahora así: | ||
 | ||
| El resultado se ve en este EJEMPLO 5. | ||
| Ahora aparece bien la pestaña de INICIO, pero también queremos que cuando pulsemos en cualquier otra, esa se ponga como activa y haga el mismo efecto que la de INICIO. Para hacer eso, es necesario que creéis tantas páginas HTML como elementos del menú (copiar y pegar cambiándoles el nombre), y que modifiquéis el código de cada una de ellas asignando la clase ACTIVO al elemento que deseéis que quede marcado, y añadiendo en los hipervínculos las otras páginas HTML. | ||
| Es por este motivo (la creación de muchos html) por lo que se hace necesario añadir los estilos en un fichero aparte, pues si luego queremos modificar algo, no tendremos que hacerlo en todos los documentos html). | ||
| Después, en cada una de las páginas HTML, asignareis los contenidos que queráis. | ||
| Aquí os dejo el código HTML de la página inicial. podéis ver el resto pulsando en la opción de menú correspondiente y mirando en el navegador el código de la página. | ||
 | ||
| El resultado de nuestro menú horizontal con efecto de pestañas se ve en este EJEMPLO FINAL | ||
| Esto es todo. Si os ha sido útil, apoyadme para que pueda continuar añadiendo tutoriales. Si teneis dudas, exponedlas en el link de debajo. | ||
|
| ||
 |
