Introducción al lenguaje JavaScript

Barra de menus simple

Descripción
	Una barra de navegación es vital en cualquier web que se precie, pero si contiene muchos enlaces la barra puede hacerse engorrosa. Es el momento de pensar en un menú desplegable. Javascript Desde Cero te ofrece esste objeto, el usado para la barra de menús usada en esta web. Sencillo y muy potente.

Como usarlo

El uso del objeto es muy simple:

1. Declarar una variable como una instancia del objeto mediante el operador new
2. Agregar a esta variable los items que forman el menú mediante el método agregar del objeto oMenu
3. Escribir el código en la página mediante el método dibujar del objeto oMenu.

Por ejemplo:

mimenu = new oMenu('mimenu', 'Lenguaje', 'esttit', 'estdesp', 'estitemactivo', 'estdescr', '1px double red')

En esta sentencia los argumentos del constructor del objeto son, por orden

'mimenu'

debe ser una cadena con el nombre de la variable usada para almacenar el menu

'Lenguaje'

Es el título que aparece en la cabecera del menú.

'esttit'

es el nombre de la clase CSS definida para la cabecera

'estdesp'

es el nombre de la clase CSS definida para la capa desplegable

'estitemactivo

es el nombre de la clase CSS definida usada para cuando un item está seleccionado

'estdescr'

es el estilo usado para la capa donde aparece la explicación de las opciones del menu

'1px double red'

separador que se usará para separar los items, está formado por tres valores separados por un espacio

grosor	número seguido de px o un valor de los siguientes: thin, medium o thick
estilo	forma del borde: none solid double inset outset ridge groove (Sólo afecta a MSIE).
color	nombre de color (por ejemplo: red) o código hexadecimal (por ejemplo: #FF00CC)

Ahora agregamos los items u opciones del menú. Este ejemplo agrega un item, si existen mas se agregan de forma similar:

mimenu.agregar('opciòn', 'direccion.htm', explicación)

'opciòn'	Nombre que aparece en el item u opción del menú
'direccion.htm'	dirección a la que se dirige la página al pulsar sobre esta opción
explicacion	descripción de la opción seleccionada.

Por último queda hacer que el menú se inserte en la página, en este caso escribiríamos algo como:

mimenu.dibujar(posX, posY)

posX	Posición horizontal en pixels donde aparece la cabecera del menú
posY	Posición vertical en pixels donde aparece la cabecera del menú

En la página de ejemplo observarás que estas instrucciones están incluidas dentro del archivo donde se guarda el código del objeto oMenu, esto no es imprescindible, podrías colocarla en la página. La razón para hacer esto es muy simple: si usas estos menús para construir una barra de navegación es fácil que un día quieras modificarla por que hayas añadidos nuevas secciones o hayas reestructurado tu sitio, esta forma de usar el menú te ahorrará tener que editar todas las páginas donde esté la barra de navegación. Para ello en cada página enlazas el archivo .js con la sintaxis habitual:

Y en el cuerpo de la página colocas

Ahora puedes modificar tus menus editando sólo el archivo objmenucsscomp.js, los cambios se reflejarán en todas las páginas que usen este archivo. Fácil ¿verdad?.

Para poder usar este objeto debes linkar en la página un archivo con los estilos CSS elegidos para la cabecera del menú, los items y la descripción. Experimenta con diferentes estilos para ver como afectan a la apariencia del menú, pero cuidado si usas bordes, una de las lindezas de Netscape es una regular implementación de ellos. Si usas imágenes para fondos en los estilos que definas ten encuenta que las URL relativas son interpretadas por MSIE correctamente, o sea, con respecto a la ubicación del archivo .css, pero Netscape las interpreta en relación al archivo donde esté usándose el estilo, o sea que si quieres mantener la compatibilidad mejor usas direcciones URL absolutas (http://....) para señalar donde está la imagen del fondo

Como funciona

El archivo con el código para este objeto contiene comentarios para que seas capaz de adaptarlo o modificarlo si lo deseas. En esencia se trata de manejar capas (bloques DIV). Existen unas capas para las cabeceras de los menús y otra para las opciones. El movimiento del ratón sobre una cabecera provoca que la capa con las opciones de ese menú se haga visible o se oculte. A diferencia de otros menús las opciones no se cierran por tiempo sino por el paso del ratón por la cabecera del menú. Las opciones de los menús poseen a su vez otros eventos de ratón para mostrar la pequeña capa con el resumen de lo que hace o donde nos envía la opción.


	Bajarlo	Verlo