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 Menús con html y css.
    1.1 Introducción.
    1.2 Menús con html.
    1.3 Menús como listas html.
    1.4 Usar css para estilizar menús html.
    1.5 Menús con botones con texto, html y css.
    1.6 Notas finales.

1 Menus con html y css.

1.1 Introducción.

Cuando nos disponemos a realizar un proyecto web, de mayor o menor envergadura, hay un elemento bastante común a casi todos los proyectos donde comienzan a asaltarnos las dudas. Este elemento es la creación de los menús que permitirán la navegación por las páginas de nuestro web site.
Suele ser un factor a tener muy en cuenta, tanto a nivel de funcionalidad como a nivel estético. La integración de menús con otros elementos de nuestro sitio como contenido, publicidad y otras aplicaciones, no es una tarea fácil y es usualmente mótivo de muchos quebraderos de cabeza. Los menús de un sitio web tienen una importancia crucial, pues es la herramienta que permitirá a los usuarios moverse a lo largo de nuestro sitio web. Incluso es un factor crucial para que los robots de los diferentes buscadores en internet realicen una correcta indexación entre las diferentes secciones de nuestro web site.
Un punto a tener muy en cuenta cuando desarrollamos los menús de nuestro sitio web es la estética del mismo. Puesto que es un elemento que posiblemente se encontrará presente en la gran mayoría de nuestras páginas web, el diseño de los mismos es muy importante. El usuario debe saber que se trata de un menú que lo transportará a diferentes secciones o páginas del web site, debe saber a primera vista diferenciar menús de contenido o publicidad. Por ello los menús suelen estar ubicados en sectores claves de nuestras páginas web, en paneles laterales o superiores de la página habitualmente.
La interactividad del propio menú y los efectos visuales del mismo son cruciales para conseguir estos objetivos.

Las técnicas para conseguir implementar menús en páginas webs son muy variadas, desde controles ActiveX, pasando por Flash y html puro combinado o no con css.
En redribera disponemos de un completo tutorial que explica como crear menús infinitos con Flash, que tal vez pueda interesaros leer como complemento a este tutorial. Como ejemplo bajo estas líneas os presento el ejemplo desarrollado en ese tutorial, cuya interactividad es bastante buena y que puede ser válido para ubicar en lugares reducidos de una página web.


Sin embargo, este tipo de menús tienen algunos inconvenientes. El navegador en el cual se visualice la página debe tener instalado algún plugin que sea capaz de visualizar archivos swf, como Flash Player. Por otro lado, este tipo de menús son completamente opacos para los robots de los buscadores. No obstante eso, no quiere decir que no utilicemos menús Flash, aquí en redribera los usamos, sin ir mas lejos en la parte superior de casi todas nuestras páginas, incluyendo esta misma que usted está leyendo.

La mayoría de las veces y por simplicidad los menús que implementamos en nuestras páginas son menús html. Se trata de estilizar en mayor o menor grado enlaces directos (encerrados entre las etiquetas <a> y </a>). Los menús compuestos por enlaces directos, disponen de un gran número de ventajas respecto a otros. El consumo de recursos de la página web para presentarlos, es mínimo, pues se trata de código html o xml. De cara a los robots de buscadores este tipo de menús son ideales, pues se tratan como enlaces puros y duros. La labor SEO (Search Engine Optimization), se hace extremadamente sencilla utilizando este tipo de menús. Sin embargo no todo son virtudes, y la labor de estilizar este tipo de menús se hace mas compleja. Para el usuario no deja de ser un enlace de texto o de imagen mas dentro de la web, por ello hay que intentar resaltarlos mediante imagenes vistosas o tipos de letra negritas o de mayor tamaño de fuente o distintos colores.

1.2 Menús con html.

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

Sobre estas líneas podeís visualizar algunos ejemplos de menús utilizando html. De acuerdo en que son ejemplos bastante rudimentarios y poco estéticos, pero en los tres ejemplos podeís ver menús utilizando enlaces directos en html, utilizando imagenes y texto encerrados entre las etiquetas html <a> y </a>.

Si os fijaís, a excepción del primer menú, que utiliza imagenes, y donde el área del enlace es toda la imagen, los otros dos menús textuales, tan solo son alcanzables, o efectivos, si posicionamos el cursor del ratón sobre el texto del enlace. Cuando queremos realizar menús estilizados, esto es un grave problema, ya que este tipo de menús tiene un impacto visual bastante pobre. También la interactividad y la sensación de control del usuario es bastante cuestionable. Quizás el tercer menú da una sensación mas fuerte de control ya que utiliza el resalte del elemento cuando estamos posicionados sobre el, este tipo de menú utiliza css para producir este efecto. Sin este tipo de control tan solo el cambio del puntero del ratón (a forma de mano), nos proporcionará el control deseado sobre el elemento.

1.3 Menús como listas html.

Una forma bastante común de generar menús con html es utilizando listas html. Para ello nos servimos de las etiquetas (tags) html <ul></ul> y <li></li>.

	
Codigo html para menú con listas.

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

   
Siguiente »