Menus desplegables simples.
Este potente objeto, diseñado para MSIE 4+ pero compatible con Netscape
4.7, te permitirá colocar menus desplegables en tu página web.
Como ilustración aquí tienes el que se usa en este sitio.
En un menú desplegable distinguiremos dos partes: la cabecera y la capa
desplegable. La primera es donde aparece el título del menú mientras
que la segunda es el bloque donde se encuentran los items u opciones del menú.
El funcionamiento ya lo conoces: al pasar el ratón por la cabecera se
despliega el menú con sus opciones, ademas este objeto te permite colocar
una explicación o descripción de cada opción que aparecerá
cuando la opción esté seleccionada (con el cursor sobre ella).
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
|
Ahora agregamos los items, 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 done aparece la cabecera del menú |
| posY | Posición vertical en pixels done aparece la cabecera del menú |
En esta página de ejemplo observarás que etas instrucciones están incluidas dentre 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:
<script language="Javascript" src="objmenucsscomp.js">
</script>
Y en el cuerpo de la página colocas
<script language="Javascript">
ponerBarra( );
</script>
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 queres mantener la compatibilidad mejor
usas direcciones URL absolutas (http://....).
Además el objeto oMenu usa algunas rutinas y objetos auxiliares definidos
en el archivo rutinasbasicas.js que deberá enlazarse a la página
donde se usa oMenú.
El código contiene los comentarios que describen completamente el objeto
oMenu y el obejto oItem, con esas explicaciones te será fácil
modificar lo que creas conveniente.