| Bueno. Ya hemos aprendido bastantes cosas, suficientes para hacer algunos ejemplos de menús. En este tutorial vamos a hacer un menú vertical simple, y lo modificaremos con distintas opciones visuales. |
| Hay que tener en cuenta que todo el código del menú irá luego dentro de nuestra página Web, dentro de un DIV, por lo que también voy a crear un DIV para incluir el menú dentro. |
| Lo primero que vamos a hacer es crear una lista con las opciones del menú. Así de simple. Vamos a darle un nombre y vamos a ponerle una cabecera, que no actuará ante nuestros clicks de ratón, solo será eso, una cabecera. Para esto último, crearemos en la lista links con A HREF en los elementos que van a ser enlaces y no lo pondremos en el que no lo vaya a ser, en este caso, la cabecera. |
 |
| Aquí, aparte de definir la caja contenedora, le he dado un identificador a nuestro menú (llamado menú, que original), he inicializado los márgenes de la lista del menú a 0 y he modificado los colores de la letra y el fondo de los elementos de la lista. Ahora iremos cambiándolos. |
| Al ejecutar el EJEMPLO, vemos que aunque hemos dado color blanco a la letra, los elementos que son links salen de color azul, eso ya sabéis que es porque los links se formatean visualmente con sus pseudo clases (tutorial anterior). |
| |
|
| Ahora vamos a modificar varios parámetros: |
 |
| Que afecten a toda la lista (ul#menu), hemos establecido el tipo de fuente y hemos quitado las viñetas que saldrían a la izquierda. |
| También hemos establecido el tamaño de la letra y la anchura de la lista (la altura no, porque será la suma de la anchura de cada elemento). |
| Mención especial al LINE-HEIGHT que establece la altura de la línea de texto y nos provoca que el texto baje dentro del recuadro y así lo alineamos verticalmente. El valor lo he ido probando a ojo, hasta que he dado con el adecuado. |
También he establecido el borde de toda la lista. Lo he puesto a 1 y en blanco.
|
| Que afecten a cada elemento (ul#menu li), hemos definido, ahora si, la altura de cada uno de ellos, hemos centrado el texto y he puesto la letra en negrita. |
| También aquí he puesto el borde en blanco y a 1px. Esto lo he hecho así, porque de esta manera, el espesor del borde entre elementos es de 2px (1px del borde inferior del elemento de arriba + 1 px del borde superior del elemento de abajo) y el espesor de los laterales también es de 2px (1px del espesor del borde de la lista + 1px del espesor del borde del elemento). Así todos los elementos y los alrededores de la lista contienen un borde blanco de 2px. |
| El EJEMPLO muestra el resultado de nuestros cambios. |
| |
| Ahora modificaremos la pseudo-clases de los links. Definiremos las propiedades de los elementos de la lista que tengan enlaces (ul#menu li a) y de esos elementos cuando esté el ratón sobre ellos (ul#menu li a:hover). |
 |
| Lo primero es decir que he modificado el margin:0px de ul#menu por un margin:5px, para que el menú quede un poco separado de la caja que lo contiene, aunque es algo con lo que cuando incluyamos el menú en la maqueta final, habremos de tener cuidado. |
| En "ul#menu li a" he modificado el color de fondo (a un verde mas claro), he definido la altura al 100% para que ocupe todo el espacio disponible del elemento y he eliminado la decoración del enlace (así no sale la línea bajo las letras) y lo he dejado en blanco. |
| El display:block es importante porque hace que todo el recuadro del elemento de la lista actúe como enlace, así bastará con situar el ratón sobre cualquier punto de ese elemento para que sea considerado como enlace. Si no lo hubiéramos puesto, solo el texto sería considerado enlace. |
| Pero cuidado, hacer que todo el elemento lista sea un link hace que la propiedad list-style-type no se vea si ponemos algún tipo de viñeta a la izquierda como 'square' o circle'. |
| Por ultimo, en la pseudo clase :hover hemos vuelto a restaurar el color original. |
| |
| Al ejecutar el EJEMPLO podemos ver el resultado final de nuestro menú. |
 |
| Aquí pongo dos ejemplos más. EJEMPLO 1, EJEMPLO 2. Estudia tu el código. Solo he modificado unas pocas líneas. |
| |
| Ahora he copiado los ficheros de la maqueta que se hizo en un tutorial anterior y he introducido en el fichero.css (aquí los datos de la hoja de estilo iban en un documento aparte) el trozo de código de nuestro primer ejemplo. |
| El fichero CSS es misestilos6.css. Si no se ve bien (pasa cuando lo abrimos desde Internet Explorer), guardadlo en el escritorio y abridlo con Worpad, por ejemplo para que los caracteres de fin de linea y retorno de carro se vean correctamente. |
| Y en el fichero HTML original (el de la maqueta de nuestra web) hemos añadido dentro del DIV “izquierda” (el que marca el espacio de color rojo), nuestro menú. |
| El resultado se ve al ejecutar este EJEMPLO. |
| No queda exactamente como queremos, pues es un poco mas corto. |
| Ensanchamos entonces nuestra lista (de 150px a 185px), y cambiamos el color rojo de la caja por #bbdeb2 y el color del borde externo de nuestra lista a negro. |
| Este último EJEMPLO muestra el resultado final. El fichero CSS es misestilos7.css y el código HTML podéis obtenerlo vosotros mismos de la ejecución del ejemplo con las opciones del navegador Ver/Código fuente (no lo pongo porque es bastante largo). |
 |
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.
|
| |
|
Español
English
Página de Portada
