Curso de Css. Aplicar estilo a enlaces y crear menús de navegación.

Una de las cosas más importantes que podemos hacer con Css es aplicar estilo a los enlaces y crear menús de navegación. Vamos a ver esto de forma sencilla, creando una página web nueva que contenga tres enlaces, para después aplicarlas distintas propiedades de css. Los enlaces son los siguientes:

El navegador mostraría este etiquetado de la siguiente manera:

 

Podemos ver que al ser el elemento a o de ancla un elemento considerado inlinelevel, los enlaces se muestran en una misma línea o seguidos uno junto al a otro. Esto en principio es bueno cuando queremos hacer un menu de enlaces horizontal. Posteriormente explicaremos que debemos hacer para mostrar el menú de forma vertical.

Una vez tenemos presentados los enlaces, toca el turno a darles estilo. Aunque podemos hacer un menú de diversas formas, en este ejemplo obtaremos por darles forma de botón. Para ello lo primero que vamos a hacer es crearles un marco a cada uno, pero antes explicaremos algo a tener en cuenta.

Un enlace como hemos dicho antes, es un elemento inline level, por tanto este puede pertenecer a cualquier elemento blocklevel, ya sea un párrafo, un div, etc, así que para dirigirnos a ellos en la hoja de estilo, podemos anteponer el nombre del elemento, donde se incluyen. En esta ocasión tratándose de un menú de enlaces lo presentaremos en el navegador incluido en un elemento div que es el elemento principal donde suelen aparecer las barras o menús de navegación, por tanto lo que haremos es etiquetar los elementos de ancla, dentro de un bloque div y este estará identificado a su vez con el nombre «menu». De esta manera el html quedaría así:

El siguiente paso es incluir este identificador o id de nombre «menu» en una hoja de estilo y vincularla a nuestra página web. Podemos utilizar la hoja de estilo que hemos creado anteriormente o crear una nueva, y posteriormente vincularla como ya sabemos, con la etiqueta link:

En la hoja de estilo incluiremos las siguientes propiedades Css:

Si nos fijamos, hemos aplicado estas propiedades css directamente a los elementos de ancla solo y exclusivamente a los que pertenecen al bloque identificado como «menu». Si hubiese más elementos de ancla en la página que no perteneciesen a dicho bloque «menu», estas propiedades css no les afectaría.

El navegador mostraría el siguiente resultado:

Lo primero que podemos verificar, es que el subrayado de los enlaces a desaparecido. Esto es efecto de aplicar la propiedad text-decoration con el valor none, que desactiva el mismo. También vemos que el tipo de fuente o letra a cambiado presentandose esta más visible y gruesa. Esto se ha conseguido aplicando la propiedad de css font-weight con valor bold.

A la mayoría de elementos de html, se les puede dar estilo según por el estado que atraviesen. Por ejemplo si pasamos con el puntero del ratón sobre un elemento, o hacemos click en él, se producirá un estado diferente el cual podemos utilizar para aplicar distintas propiedades con Css. Poniendo de ejemplo los enlaces, podemos utilizar las siguientes pseudoclases, para aplicar estilo a los diferentes estados por los que puede atravesar el mismo:

Aplicando pseudoclases a nuestro elementos de ancla que forman el menú horizontal que estamos creando, podemos estilizarlo o darle un toque personal que hará que este sea más funcional o de mejor apariencia. Vamos a añadir a nuestra hoja de estilo las siguientes propiedades:

El efecto que produce en nuestro menú horizontal es el siguiente:

Como vemos, al pasar el puntero del ratón sobre cualquier botón el fondo y el color del texto cambia de color, dejando más claro en que botón estamos o vamos a actuar. Las pseudoclases active y visited se aplicarian exactamente igual que la que hemos utilizado en este ejemplo.
La pseudoclase visited la tengo configurada en mi sitio. Si habeis estado ya en la página enlazada por cualquiera de estos botones, estos se presentarán con texto de color verde u olive.

Menús de enlaces verticales.

Para crear un menú de enlaces vertical podemos emplear varios métodos, unos más prácticos que otros.

Recordemos que los elementos de ancla son elementos considerados inline-level o que actuan en la misma línea sin producir salto. Por tanto para situarlos en columna o unos debajos de otros de forma vertical, tendremos que crear algún mecanismo que nos permita hacer esto. las opciones son las siguientes:

De estos métodos nos quedaremos con el último, por ser el más limpio, fácil y aconsejable de los trés.

Una vez más acudiremos a nuestra hoja de estilo y la modificaremos o añadiremos lo siguiente:

El resultado sería:

Podemos comprobar como los enlaces se convierten en elementos de bloque, ocupando todo el ancho del elemento recipiente que los contiene, en este caso el div «menu». Tengo que aclarar que el div «menu» y por tanto los elementos de bloque o enlaces que contiene, ocuparian todo el ancho de la pantalla de visión del navegador. Ocurre que yo he dejado un poco de margen para que el ejemplo se muestre con mayor claridad.

El siguiente paso es dar a los botones el ancho o medida que creamos conveniente, para ello podemos optar por aplicar la propiedad width al div contenedor o «menu», o aplicar dicha propiedad directamente a los enlaces o anclas, en cualquiera de los dos casos dará el mismo resultado. Yo optaré por aplicarlo directamente a los enlaces:

El resultado sería:

Ya está esto algo más presentable, pero al aplicar un ancho de 80px el texto de cada botón aparece descentrado. Esto es lógico, ya que antes aplicabamos 20px de padding por cada lado, que al no tener ancho fijo, esto bastaba para centrar el texto. Pero ahora el aplicar padding lateral a los enlaces no vale de mucho con este ancho. Una solución buena es dejar el padding vertical con la medida que tiene, es decir 5px y eliminar o anular el padding lateral dejándolo a «0px» o «0» y después añadir la propiedad text-align establecida con un valor de «center» y esto servirá para centrar el texto de los botones.

La hoja de estilo quedaría así:

El resultado sería:

Y ya tenemos nuestro menú de enlaces vertical listo, el cual podemos utilizar por ejemplo en una columna lateral de una página web.

Podemos utilizar como fondo de botón una imagen, en vez de un color, como vimos en esta página del curso. Con este segundo tipo de menú de enlaces, ya tenemos listo este tema. Hay otra forma de crear menús utilizando el elemento <span>, añadiendo el atributo onclick, o el atributo onmouseover de html, junto con un pequeño fragmento de javascript para redirigir a una página cualquiera, pero esto se escapa de la temática principal de este curso de Css.

Queda por hablar de los menús de navegación de varios niveles. los más comunes suelen estar hechos utilizando css junto con javascript. Son fáciles de crear, pero hablar de el lenguaje Javascript, como dije antes, no forma parte de la temática de este curso. En cualquier caso si alguien esta interesado en saber como hacer un menú desplegable utilizando javascript, que me lo haga saber y gustosamente le indicaré como hacerlo.