Tecna Webs - Desarrollo web Y Android ™

imagen cabecera y logo
Sección:
Desarrollo web.
Categoría:
Menús.
Nombre:
Menú expandible y pegajoso.
Fecha:
22-09-2013
Asunto:
Menú expandible horizontalmente que se desplaza verticalmente al mover el scroll, especialmente pensado para pantallas reducidas.

Menú expansible y pegajoso.

Descripción.

Es el menú que se creó para esta página y está pensado para que no ocupe mucho espacio cuando no se necesita, lo que resulta ideal en dispositivos con pantallas reducidas. Al poner el ratón sobre él se expande horizontalmente por encima del contenido, dejando ver las opciones del menú, pero tiene un enlace a la página del índice por si no estuviera disponible el evento, con lo que se garantiza la accesibilidad, porque tampoco necesita javascript para funcionar correctamente.

Si el contenido es lo suficientemente largo como para tener que desplazarnos hacia abajo para continuar leyendo, el menú también se desplaza, por eso lo hemos llamado pegajoso. Así siempre está visible y esto mejora la usabilidad ya que se puede acceder a él desde cualquier parte de la página sin necesidad de desplazarse. Si este efecto no funcionara el menú permanecería en su posición original totalmente accesible, sólo que habría que desplazarse hasta él. Cuidar los detalles para que todo funcione correctamente en cualquier circustancia es uno de nuestros principales objetivos ya que evita que se pierdan posibles visitantes por errores técnicos o tiempos de carga exagerados.

Se ha colocado a la derecha de página, pegado siempre al borde del contenido para que esté cerca del borde de la ventana, sea el que sea el tamaño de ésta y así esté cerca de la barra de scroll si es que existe y sea más cómoda la navegación. Tiene un ancho variable pero respetando un ancho mínimo para que sea cómodo de usar sobre todo en pantallas reducidas.

A modo de pictograma se ha usado una imagen para señalizar el menú en su versión plegada. Es la imagen de una mano con todos los dedos flexionados excepto el índice, y es precisamente al índice de la página a donde conduce el enlace si hacemos click sobre la imagen, además de que la posición indicadora de la mano, (que es la misma que tiene el cursor del ratón sobre un enlace), nos sugiere que se puede pulsar sobre la imagen, lo que resulta muy intuitivo para usuarios de pantallas táctiles y no es necesario si se usa ratón porque nada más poner el ratón sobre la imagen se desplegará el menú. Cuando el menú está expandido la imagen cambia de color. Para crear ambas imágenes se hizo primero con el programa Blender, un modelo en 3D con armadura de huesos para, moviendo los huesos, lograr la pose indicadora con la que se hicieron los render. Encontrará más información sobre esto en las categorías de modelado y rigging y en los portfolios.

Desde las distintas opciones del menú se puede acceder a las secciones temáticas de la página y también a la página de contacto desde donde se puede enviar un formulario. Como la página de contacto es una página diferente, independiente del índice, se ha aplicado unos estilos un poco diferentes. Al enlace a los portfolios se le ha dado un poco más de relevancia ya que también es una sección un poco especial porque contiene lo más destacado de las otras tres secciones temáticas.

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google según las condiciones descritas en la Creative Commons 3.0 Attribution. Más información en el enlace aviso legal del pie de página.

tecnawebs arroba gmail punto com