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
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, 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.