Dinamic FX Slide-in Javascript Menú

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este es un simple ejemplo en Javascript que permite insertar un menú lateral con efecto de slide para una página web.

El menú se encuentra escondido en la parte izquierda de la pantalla, y el usuario cuando pase el mouse se desplegará en forma completa.

Mas información sobre el programa.

¿ Para que tipo de páginas puede ser útil ?

Este menú de enalces es útil para páginas que necesiten un menú extra a parte del principal, o cuando se quiera utilizar como menú principal en páginas que no tengan demasiado espacio.

Captura de pantalla del menú contraido

Captura del menú al desplegarlo

Contenido del archivo de descarga

Contiene un archivo HTML con el ejemplo, y dos archivos Javascript para que funcione el menú, ssm.js y ssmItems.js.

El archivo ssm.js es el script que contiene el código y funciones varias para crear y desplegar el menú en la página. Este archivo no será necesario editar o modificar.

El archivo ssmItems.js es el que contiene las configuraciones y los items o enlaces, es decir que este archivo lo tendremos que abrir con nuestro editor de páginas web o un simple editor de texto para poder añadir las URL de los enlaces y realizar otras configuraciones.

¿ Cómo definir los enlaces ?

Simplemente agregar en cada elemento del array, las direcciones Urls y el texto del enlace.

El array en cada elemento contiene 2 dimensiones principales, una para indicar el texto del enlace, y otra para la dirección URL.

array[0]=["texto del link", "dirección web"]

Si queremos crear una sección o cabecera, es decir que el elemento no se comporte como un enlace, con solo dejar el campo en blanco, se agregará como una nueva sección en vez de un link.

Por ejemplo para crear dos secciones o categorías con 3 enlaces cada una de ellas, el código sería el siguiente:

ssmItems[0]=["Categoría 1"] // Cabecera o sección del menú ssmItems[1]=["Enlace 1", "http://www.direccion.com", ""] ssmItems[2]=["Enlace 2", "http://www.direccion.com",""] ssmItems[3]=["Enlace 3", "http://www.direccion.com", ""] ssmItems[4]=["Categoría 2"] // Cabecera o sección ssmItems[5]=["Enlace 1", "http://www.direccion.com", ""] ssmItems[6]=["Enlace 2", "http://www.direccion.com",""] ssmItems[7]=["Enlace 3", "http://www.direccion.com", ""]

El resultado:

Nota: Para definir el modo en que se abrirá la página al hacer click en el enlace, puedes pasar en el tercer lugar del array, el valor blank para que se abra en una nueva ventana del navegador. Por defecto, al dejar el campo vacío, la nueva página se abrirá en la misma ventana.

Otras configuraciones

Es posible realizar otras configuraciones al menú editando algunas variables del archivo ssmItems.js, por ejemplo:

slideSpeed : Velocidad de la animación del menú cuando se despliega.

menuBGColor : EL color de fondo del menú

menuWidth : Valor para el ancho.

hdrFontFamily, hdrFontColor, hdrBGColor, hdrHeight, hdrFontSize: Para configurar las cabeceras o secciones ( Tipo de fuente, color, tamaño etc ..)

linkFontFamily, linkFontSize, linkBGColor, linkTarget, linkAlign: Para configurar los enlaces (La fuente, los colores, alineaciones, tamaños etc ..)

barText: Es el texto de la barra del menú que se visualiza cuando se encuentra contraido. También se puede colocar una imagen, utilizando el atributo IMG.

Nota. En caso de que al rellenar el array con los datos para los enlaces, y al probarlo en el navegador no se visualice el menú, un error posible puede ser que no hayas definido los índices del array en forma consecutiva, por ejemplo lo siguiente generaría un error y no desplegaría el menú por que falta el elemento 6 del array.

¿ En que navegadores funciona el script ?

El menú ha sido probado en: Mozilla Firefox 1.5 o superior, Internet explorer 5.5+, Chrome, Opera 9.