Creative Commons License
Menus como botones con html y css. por Julio Laguna is licensed under a Creative Commons Reconocimiento-No comercial-Sin obras derivadas 2.5 España License.

Menús como botones con html y css.
por Julio Laguna - redribera

1 Menus con html y css.

1.4 Usar css para estilizar menús html.

Como podreís observar, existen diferentes formas de generar menús con html. Por lo general estas formas consisten en generar de uno u otro modo enlaces directos encerrados entre las etiquetas <a> y </a>, y a su vez estos contenidos en alguna estructura html, como tablas, capas, o listas. Tan solo os he presentado ejemplos de menús en estilo vertical, aunque el modo de proceder es análogo con menús de estilo horizontal.

Las soluciones expuestas para utilizar menús html, son muy válidas para cualquier website basado en html o xml. Estas soluciones presentan un grado de funcionalidad óptimo en la mayoría de sitios, referido a SEO y baja carga de recursos, sin embargo el aspecto visual de los mismos deja mucho que desear.
La capacidad de estilización de menús y los elementos que lo componenen es sin embargo máxima cuando utilizamos Flash para generar menús.

Sin embargo existe una solución muy potente para conseguir efectos visuales válidos y significativos en menús creados mediante html. Se trata del css (Cascading Style Sheets), las populares hojas de estilo.

El css, tan solo por el mismo, ya merece un libro completo para el solo. De hecho existen varios, algunos muy buenos. La mayor información acerca del estandar y sus especificaciones se encuentra en el sitio de la w3c. Aquí teneís la página principal para las especificaciones css de la w3C. El problema es que el contenido mayoritariamente es en inglés. Aquí os dejo un enlace a la Guia Breve de css de la oficina española de la w3C, que si que está en español y que puede ser una buena herramienta para comenzar con el aprendizaje o perfeccionamiento del css.

Css nos ayudará a estilizar nuestros menús y no solo nuestros menús, también el resto de nuestra web si esta está basada en html, xml o xhtml.
Volvamos nuevamente a echar un vistazo a los 3 menús que os presenté anteriormente.

Menu con imagenes Menu con texto Menu con texto resaltado



menu Item 1
menu Item 2
menu Item 3
menu Item 1
menu Item 2
menu Item 3

De estos 3 menús, tan solo el tercero (Menú con texto resaltado), utiliza css para producir el efecto de cambio de color al pasar el puntero del ratón sobre los elementos (RollOver).

.link2c2 {
  /* Links para categorías y otros */
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #0000FF;
  text-decoration: underline;
}

a:hover.link2c2 {
  color: #FF0000;
}

Sobre estas líneas está el código css utilizado para producir este efecto. Y la construcción html de el menú sería la siguiente.

<a href="#" rel="nofollow" class="link2c2">menu Item 1</a><br/>
<a href="#" rel="nofollow" class="link2c2">menu Item 2</a><br/>
<a href="#" rel="nofollow" class="link2c2">menu Item 3</a><br/>

Una sencilla modificación sobre el código css, nos otorga un mayor control sobre la estilización, por ejemplo que el tamaño de letra y el color de fondo cambien:

.link2c2 {
  /* Links para categorías y otros */
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #0000FF;
  text-decoration: underline;
}

a:hover.link2c2 {
  color: #FF0000;
  font-size:18px;
  background-color:#FFCC00;
}
	
	
menu Item 1
menu Item 2
menu Item 3

Fijaos como con estas pequeñas modificaciones de código css, comenzamos a obtener efectos visuales mas impactantes, sobre todo de cara al usuario que ya empieza a tener control sobre el menú. Y así mismo es una forma buena de poder adaptar sencillos menús html al aspecto que queremos que tenga nuestra página web.

La potencia de css es enorme y lo que os presento es una gota de agua en el oceano de las capacidades de css y html combinados.

A modo de ejemplo este uso del css y esta forma de implementar menús mediante código html, es válida, pero centrandonos en el tema central de este tutorial todavía encontramos un serio problema a la hora de utiliar menus, por ejemplo con respecto al uso de imagenes como elementos del menú, la apariencia de botón.

Menu con imagenes Menu con texto resaltado



menu Item 1
menu Item 2
menu Item 3

Y es que si os fijaís en los dos menús sobre estas líneas, la diferencia puede ser sustancial, ya que mientras en el enlace directo como imagen del primer menú, el area del enlace, es toda la imagen a diferencia de lo que sucede con el segundo menú de texto. Tan solo somos capaces de alcanzar el destino, posicionando el ratón sobre el texto del enlace. A veces esto es lo que podemos desear, pero sobre todo a la hora de crear menús el hecho de que el área alcanzable, o del enlace, sea tratado como un botón, no solo presionando el texto, es un factor muy deseable para dotar a los menús de nuestra web, tanto de una estética mas visual, así como de un control de la navegación superior por parte del usuario.

« Anterior
Indice
Siguiente »