Como se define un menú

imaginaticMenu es un menú configurable que permite múltiples niveles, varios menús por página y colocarlo en posición vertical o horizontal. Se puede utilizar en la mayoría de navegadores.

Para crear un menú sencillo hay que poner el siguiente código en la página:

En la cabecera (entre las marcas HEAD):

<script language="JavaScript1.2" src="imaginatic_menu.js"></script>

En el cuerpo del documento (entre las marcas BODY) la referencia al archivo que define el menú, por ejemplo:

<script language="JavaScript1.2" src="main_menu_def.js"></script>

Éste es un ejemplo del código que podría contener este archivo, en una versión todo en uno con la definición del menú, la llamada a la creación del menú y los elementos para controlar que se cierre el menú cuando se haga click fuera de él:

alordaMenu = new Menu ('alordaMenu',0,0);


alordaMenu.addItem ('Indice','',false);
    alordaMenu.addItem ('Homepage','x',false);
    alordaMenu.addItem ('Scripts','',false);
        alordaMenu.addItem ('Menú','menu.html',true);
    alordaMenu.addItem ('-','-',false);
    alordaMenu.addItem ('Ejemplos','',true);
        alordaMenu.addItem ('Alorda','alorda/index.html',true);
alordaMenu.addItem ('Contacto','',true);
    alordaMenu.addItem ('e-Mail','mailto:mapintanel@wanadoo.es',true);

alordaMenu.doMenu();

//control
if (document.layers){
    document.onMouseDown = hideMenus;
} else {
    document.body.onclick = hideMenus;
}
Fig. 1 Definición del menú

Para adaptar el menú a vuestro contenido fijémonos en el ejemplo anterior (hemos añadido tabulaciones para favorecer la lectura del menu, no afecta a su funcionamento), antes que nada tenemos que definir el menu, esto se hace como en la primera linea del código anterior con nombredelmenu = new Menu ('nombredelmenu', izquierda, arriba). Es importante recordar que javaScript es sensible a la diferencia entre mayusculas y minúsculas, así que el nombre del menú tiene que ser igual cada vez que lo escribimos, tanto en la creación del menú como más adelante. Las propiedades izquierda y derecha indican la situación de la esquina superior izquierda.

La posición inicial sólo puede ser 0,0 en los menús definidos para tener una posición relativa.

Cada vez que escribimos nombredelmenu.addItem (Text,URL,isLast) estamos añadiendo una entrada nueva en el menú. Cuando la propiedad URL está vacía estamos definiendo que la siguiente linea es un nuevo submenu. Cuando isLast es igual a true la entrada es la última de un submenú (ver Fig. 1 para verlo gráficamente).

Otras normas útiles: Cuando URL es igual a 'x', o cuando URL es igual a la dirección de la página actual, la entrada estará desactivada. Cuando Text y URL son iguales a '-' la entrada es un separador. Cuando URL es igual a 'v' la entrada es la opción activa (ver menú de idiomas de la homepage para un ejemplo). Cuando un menú utliza frames si URL es un link relativo del tipo '#apartado' que apunta a un elemento de la página que contenga un id, por ejemplo <p id="apartado">texto</p> marcará su posición, aparte de hacer ir a esta (ver menú Capítulos para un ejemplo)

La función doMenu () crea el menú y lo muestra en pantalla. Las últimas líneas de código son un control para que el menú se cierre al hacer click en cualquier otro elemento del documento.

Cambiando el aspecto y el comportamiento del menú

Para modificar el aspecto y el comportamiento del menú podemos modificar cualquiera de las siguientes líneas del documento imaginatic_menu.js o crear un script de preferencias que contenga opciones del apartado preferencias (más adelante explicaremos cómo se utilizan los scripts de preferencias):

Lista de preferencias

//comportamiento
var autoHide_activate = true;
var autoHide_seconds = 6;

// Preferencias
this.m_vertical  = true;
this.m_width  = this.sm_width;
this.m_height  = this.sm_height;
this.sm_width  = 123;
this.sm_height  = 28;
this.default_icon_height = 16;
this.default_icon_width = 16;
this.h_offset  = -3;
this.v_offset  = 3;
this.vertical_adjust = 0;
this.horizontal_adjust = 0;
this.zIndx = 10;
this.activeYouarehere = true;
this.default_cursor ='default';
this.link_cursor = 'pointer';
this.sm_direction = 'right';
this.base_url = 'http://mi.pagina.es/pruebas/';
this.default_main_page = 'index.html';
this.positioning = 'absolute';
this.internal_browse_active = true;
this.base_url_active = true;
this.frameMenu = 'noFrames';
this.frameSubMenu = 'noFrames';
// style of layers that contains submenus
this.l_m_background  = '#99CCCC';
this.l_m_border = '2px outset #FFFFFF';
this.l_m_border_top = this.l_m_border;
this.l_m_border_right = this.l_m_border;
this.l_m_border_bottom = this.l_m_border;
this.l_m_border_left = this.l_m_border;
this.l_sm_background  = '#CCFFFF';
this.l_sm_border = '2px outset #FFFFFF';
this.l_sm_border_top = this.l_sm_border;
this.l_sm_border_right = this.l_sm_border;
this.l_sm_border_bottom = this.l_sm_border;
this.l_sm_border_left = this.l_sm_border;
// styles for first level menu items
this.m_align = 'center';
this.m_padding = 3;
this.m_background  = '#3333AA';
this.m_bottom_decor = '';
this.m_txt_font_family = 'Helvetica, Arial, sans-serif';
this.m_txt_font_size = '12px';
this.m_txt_color  = '#FFFFFF';
this.m_txt_weight = 700;
this.m_txt_decoration = 'none';
// styles on mouseover for first level menu items
this.m_a_background  = this.m_background;
this.m_txt_a_color  = this.m_txt_color;
this.m_txt_a_link_weight = 900;
this.m_txt_a_link_decoration = 'none';	
// styles for submenu items
this.sm_align = null;
this.sm_padding = 3;
this.sm_background  = 'silver';
this.sm_bottom_decor = '1px inset #FFFFFF';
this.txt_font_family = 'Helvetica, Arial, sans-serif';
this.txt_font_size = '11px';
this.txt_color  = 'black';
this.txt_weight = 700;
this.txt_decoration = 'none';
// styles on mouseover for submenu items
this.sm_a_background  = '#669999';
this.txt_a_font_family = this.txt_font_family;
this.txt_a_font_size = this.txt_font_size;
this.txt_a_color  = 'white';
this.txt_a_link_weight = 900;
this.txt_a_link_decoration = 'underline';
// styles for inactive submenu items
this.txt_i_font_family = this.txt_font_family;
this.txt_i_font_size = this.txt_font_size;
this.txt_i_color  = 'gray';
// images and decoration
this.default_image = 'url(images/trans.gif)';
this.m_dec = 'url(images/trans.gif)';
this.m_a_dec = 'url(images/trans.gif)';
this.sm_sep = (NN)? '----------' : 'url(images/trans.gif)';
this.sm_arrow = 'url(images/mini_right.gif)';
this.sm_a_arrow = 'url(images/mini_a_right.gif)';
this.sm_left_arrow = 'url(images/mini_left.gif)';
this.sm_a_left_arrow = 'url(images/mini_a_left.gif)';
this.sm_current = 'url(images/v.gif)';
this.iconYouarehere = 'url(images/iconYouarehere.gif)';
this.iconYouarenothere = 'url(images/iconYouarenothere.gif)';
this.thenames_waiting = 'url(images/waiting.gif)';
this.thenames_down = 'url(images/down.gif)';
this.thenames_up = 'url(images/up.gif)';
this.thenames_here = 'url(images/here.gif)';
// Fin Preferencias

Valores de las preferencias

var autoHide_activate = true;
Si el valor es true el menú se cierra pasados unos determinados segundos sin que el cursor este encima del menú
var autoHide_seconds = 6;
Cantidad de segundos que tarda en cerrarse el menú automáticamente, puede tener un valor mínimo de 0.01
this.m_vertical = true;
Si el valor es true el primer nivel de menú (el que está siempre visible) tiene una disposición vertical, si el valor es false el menú es horizontal
this.m_width = 100;
Ancho por defecto de los elementos del menú de primer nivel
this.m_height = 25;
Alto por defecto de los elementos del menú de primer nivel
this.sm_width = 123;
Ancho por defecto de los elementos de los submenús
this.sm_height = 28;
Alto por defecto de los elementos de los submenús
this.default_icon_height = 16;
Alto de las imágenes de decoración y flechas en los elementos del menú
this.default_icon_width = 16;
Ancho de las imágenes de decoración y flechas en los elementos del menú
this.h_offset = -3;
Distancia horizontal entre los submenús en relación al elemento que los abre, en este caso con un valor negativo el menú que se abre queda 3 píxels encima del citado elemento
this.v_offset = 3;
Distancia vertical entre los submenús en relación al elemento que los abre, en este caso con un valor positivo el menú que se abre queda 3 píxels más abajo que el citado elemento
this.vertical_adjust = 0;
Utilizado para forzar el menú a que se abra más abajo o más arriba de lo que lo haría normalmente, sólo es útil para menús que se abran en diferentes frames
this.horizontal_adjust = 0;
Igual que el anterior, pero para la posición horizontal
this.zIndx = 10;
z-index del menú, utilizado para que no se superponga con otras capas de la página
this.activeYouarehere = true;
Cuando es true está activo el sistema para ver de forma gráfica en que sitio estamos dentro de la estructura del site, funciona con un botón que abre el menú hasta esa posición y que marca con una imagen el elemento que tiene la URL actual
this.default_cursor ='default';
Forma del cursor cuando pasa por encima de un elemento del menú
this.link_cursor = 'pointer';
Forma del cursor cuando pasa por encima de un elemento que contiene un link
this.sm_direction = 'right';
Dirección por defecto hacia la que se abren los submenús, las opciones son right (derecha) y left (izquierda)
this.base_url = 'http://mi.pagina.es/pruebas/';
Utilizado para poder utilizar una sola definición de menú cuando hay varias carpetas y para mejorar la respuesta del sistema Usted está aquí
this.default_main_page = 'index.html';
Nombre de la página inicial por defecto, utilizado por el sistema Usted está aquí cuando la URL no contiene el nombre de la página
this.positioning = 'absolute';
Posicionamiento del menú, las opciones válidas son absolute o relative, funciona igual que en CSS. Los menús que utilzan dos frames sólo pueden ser absolutos
this.internal_browse_active = true;
Activa la ayuda a la navegación cuando en un menú hay links internos
this.base_url_active = true;
Para desactivar la opción de base_url, si esta da problemas, poner false como valor
this.frameMenu = 'noFrames';
Nombre del frame donde está el menú principal, o noFrames si el menú se abre en una sola página
this.frameSubMenu = 'noFrames';
Nombre del frame donde se abren los submenús, o noFrames si el menú se abre en una sola página
this.l_m_background = '#99CCCC';
Color de fondo de la capa donde estan agrupados los menús de primer nivel, solo es visible cuando se estan cargando las imágenes de los elementos. Puede tener el valor transparent si no se quiere fondo o un color válido
this.l_m_border = '2px outset #FFFFFF';
Estilo del borde de la capa que agrupa los elementos de primer nivel siguiendo las normas CSS
this.l_m_border_top = this.l_m_border;
Estilo del borde superior de la capa que agrupa los elementos de primer nivel, en este ejemplo coge los datos de l_m_border
this.l_m_border_right = this.l_m_border;
Estilo del borde derecho de la capa que agrupa los elementos de primer nivel
this.l_m_border_bottom = this.l_m_border;
Estilo del borde inferior de la capa que agrupa los elementos de primer nivel
this.l_m_border_left = this.l_m_border;
Estilo del borde izquierdo de la capa que agrupa los elementos de primer nivel
this.l_sm_background = '#CCFFFF';
Color de fondo de la capa que agrupa los elementos de cada submenú
this.l_sm_border = '2px outset #FFFFFF';
Estilo del borde de la capa que agrupa los elementos de cada submenú
this.l_sm_border_top = this.l_sm_border;
Estilo del borde superior de la capa que agrupa los elementos de cada submenú
this.l_sm_border_right = this.l_sm_border;
Estilo del borde derecho de la capa que agrupa los elementos de cada submenú
this.l_sm_border_bottom = this.l_sm_border;
Estilo del borde inferior de la capa que agrupa los elementos de cada submenú
this.l_sm_border_left = this.l_sm_border;
Estilo del borde izquierdo de la capa que agrupa los elementos de cada submenú
this.m_align = 'center';
Alineación de los elementos del menú de primer nivel, las opciones son center, right, left
this.m_padding = 3;
Espacio entre el borde de un elemento y su contenido. Si es un número entero, como en este caso, el espacio es igual en cada lado, pero se puede poner como valor un array, por ejemplo [3,5,3,5] , que corresponde a [arriba,derecha,abajo,izquierda]
this.m_background = '#3333AA';
Color, o imagen, de fondo de los elementos de primer nivel del menú. Las opciones son un color hexadecimal, como en este caso, o una imagen de fondo que tiene que estar definida en el formato url(images/fondo.gif)
this.m_bottom_decor = '';
Borde inferior de los elementos del menú definido como en un borde CSS
this.m_txt_font_family = 'Helvetica, Arial, sans-serif';
Familia de texto de los elementos de primer nivel
this.m_txt_font_size = '12px';
Tamaño del texto de los elementos de primer nivel, siguiendo las normas CSS, es preferible utilizar la medida en píxels para mantener el aspecto del menú
this.m_txt_color = '#FFFFFF';
Color del texto de los elementos de primer nivel
this.m_txt_weight = 700;
Grosor del texto de los elementos de primer nivel, valores desde 400 a 900
this.m_txt_decoration = 'none';
Decoración del texto, las opciones son none (sin decorar) o underline (subrayado)
this.m_a_background = this.m_background;
Fondo de los elementos de primer nivel cuando estan activos (cuando tienen el cursor encima)
this.m_txt_a_color = this.m_txt_color;
Color del texto de los lementos activos de primer nivel
this.m_txt_a_link_weight = 900;
Grosor del texto de los elementos activos de primer nivel
this.m_txt_a_link_decoration = 'none';
Decoración del texto de los elementos activos de primer nivel
this.sm_align = null;
Alineación del texto en los elementos de los submenús, en este caso null para utilizar la alineación por defecto (izquierda en los menús que abren hacia a la derecha, derecha para los que abren a la izquierda), otras opciones son left o right
this.sm_padding = 3;
Espacio entre el contenido y el borde de los elementos de submenú, ver m_padding para explicación
this.sm_background = 'silver';
Fondo de los elementos de los submenús
this.sm_bottom_decor = '1px inset #FFFFFF';
Decoración inferior de los elementos de los submenús
this.txt_font_family = 'Helvetica, Arial, sans-serif';
Familia de texto de los elementos de los submenús
this.txt_font_size = '11px';
Tamaño del texto en los elementos de los submenús
this.txt_color = 'black';
Color del texto en los elementos de los submenús
this.txt_weight = 700;
Grosor del texto en los elementos de los submenús
this.txt_decoration = 'none';
Decoración del texto en los elementos de los submenús
this.sm_a_background = '#669999';
Fondo de los elementos activos de los submenús
this.txt_a_font_family = this.txt_font_family;
Familia de texto en los elementos activos de los submenús
this.txt_a_font_size = this.txt_font_size;
Tamaño de la fuente en los elementos activos del submenú
this.txt_a_color = 'white';
Color del texto en los elementos activos de los submenús
this.txt_a_link_weight = 900;
Grosor del texto en los elementos activos de los submenús
this.txt_a_link_decoration = 'underline';
Decoración del texto en los elementos activos de los submenús
this.txt_i_font_family = this.txt_font_family;
Familia del texto de los elementos desactivados de los submenús (en los que en lugar de un URL hay una letra x en la definición del elemento)
this.txt_i_font_size = this.txt_font_size;
Tamaño del texto de los elementos desactivados de los submenús
this.txt_i_color = 'gray';
Color del texto de los elementos desactivados de los submenús
this.default_image = 'url(images/trans.gif)';
A partir de la versión 1.0 del menú la decoración de los menús (flechas, o indicadores de estado o tipo de link) sólo pueden ser imágenes y ésta sería la imagen por defecto, en principio una imagen en blanco.
this.m_dec = 'url(images/trans.gif)';
Decoración de los elementos de menú de primer nivel
this.m_a_dec = 'url(images/trans.gif)';
Decoración de los elementos activos de primer nivel
this.sm_sep = (NN)? '----------' : 'url(images/trans.gif)';
Imagen que se utiliza para simular la separación entre grupos de elementos
this.sm_arrow = 'url(images/mini_right.gif)';
Imagen para la flecha de los elementos que abren un nuevo submenú
this.sm_a_arrow = 'url(images/mini_a_right.gif)';
Imagen para la flecha de los elementos activos que abren un nuevo submenú
this.sm_left_arrow = 'url(images/mini_left.gif)';
Imagen para la flecha de los elementos que abren un nuevo submenú hacia la izquierda
this.sm_a_left_arrow = 'url(images/mini_a_left.gif)';
Imagen para la flecha de los elementos activos que abren un nuevo submenú hacia la izquierda
this.sm_current = 'url(images/v.gif)';
Imagen para los elementos que estan marcados como actuales con una url de valor v
this.iconYouarehere = 'url(images/iconYouarehere.gif)';
Imagen utilizada para el icono de la función Usted está aquí cuando reconoce la página actual
this.iconYouarenothere = 'url(images/iconYouarenothere.gif)';
Imagen utilizada para el icono de la función Usted está aquí cuando no reconoce la página actual
this.thenames_waiting = 'url(images/waiting.gif)';
Imagen utilizada cuando hay links internos en el menú, esta imagen en concreto aparece cuando el menú aun está calculando la posición de los elementos
this.thenames_down = 'url(images/down.gif)';
Imagen que indica que el link interno está más abajo de la posición de scroll de la página
this.thenames_up = 'url(images/up.gif)';
Imagen que indica que el link interno está más arriba de la posición de scroll de la página
this.thenames_here = 'url(images/here.gif)';
Imagen que indica que estamos en el apartado al que hace referencia este elemento

Añadir preferencias en la definición del menú

Para hacer más flexible la creación de los menús en cualquier momento se puede modificar algún parámetro en la misma definición del menú, como en el ejemplo siguiente:

plantes = new Menu ('plantes',325,0);

//Prefs
plantes.m_vertical = false;
plantes.l_m_color = '#FF9933';
plantes.l_sm_color = '#CCFFFF';
plantes.m_color = '#3333AA';
plantes.sm_color = '#AACCFF';
plantes.sm_a_color = '#FFFF99';

plantes.addItem ('Plantes','',true);
    plantes.addItem ('General','gen.html',false);
    plantes.addItem ('Segle IV','segleiv.html',false);
    plantes.addItem ('Segle III','segleiii.html',true);

En el ejemplo anterior hemos definido la posición horizontal y colores diferentes. Sólo hace falta añadir las propiedades del script que hemos podido ver más arriba cambiando donde pone this por el nombre del menú.

Crear scripts de preferencias

Desde la versión 1.0 es preferible usar un script de preferencias, o varios si fuese necesario, a volver a definir las preferencias del script en cada menú, ya que esto permite separar la forma, o el comportamiento, del contenido del menú. De esta forma podremos cambiar el diseño de varios menús de forma rápida o separar comportamientos comunes utilizando la misma estructura del menú. Para utilizar este tipo de scripts la llamada a este script debe estar antes de la definición, por ejemplo:

<script language="JavaScript1.2" src="main_menu_prefs.js"></script>
<script language="JavaScript1.2" src="main_menu_def.js"></script>

donde el primer archivo podría tener este código:

function main_menu_prefs (){
	this.m_width = 60;
	this.m_height = 24;
	this.horizontal_adjust = -10;
	this.m_color = '#99CCCC';
	this.m_a_color = '#99CCCC';
	this.m_dec = 'url(images/double_right.gif)';
	this.m_a_dec = 'url(images/double_a_right.gif)';
	this.sm_color  = 'url(images/fons_off.gif)';
	this.sm_a_color  = 'url(images/fons_on.gif)';
	this.txt_color  = 'black';
	this.txt_a_color  = 'white';
	this.m_bottom_decor = '1px solid black';
	this.sm_bottom_decor = '1px dashed silver';
	this.m_txt_font_family = 'Verdana, Helvetica, Arial, sans-serif';
	this.m_txt_font_size = '12px';
	this.m_txt_color  = '#FFFFFF';
	this.m_txt_weight = 400;
	this.m_txt_a_link_weight = 400;
	this.l_m_border_bottom = '1px solid #000000';
	this.l_m_border_top = '';
	this.l_m_border_left = '';
	this.l_m_border_right = '';
	this.l_sm_border = '1px solid #99CCCC';
	this.l_sm_border_top = this.l_sm_border;
	this.l_sm_border_right = this.l_sm_border;
	this.l_sm_border_bottom = this.l_sm_border;
	this.l_sm_border_left = this.l_sm_border;
	this.m_txt_a_link_decoration = 'underline';
	this.frameMenu = 'leftFrame';
	this.frameSubMenu = 'mainFrame';
}

y en el segundo archivo la definición con la función nombredelmenu.import_prefs ('nombre') colocada después de la creación del menú y antes de añadir elementos a este. Es una buena práctica llamar a la función de preferencias (main_menu_prefs en nuestro ejemplo) igual que el archivo que la contiene sin la extensión .js. Aquí vemos como se incorpora a la definición del menú:

mainMenu = new Menu ('mainMenu',0,0);

mainMenu.import_prefs ('main_menu_prefs');

mainMenu.addItem ('Index','',false);
    mainMenu.addItem ('Homepage','x',false);
    mainMenu.addItem ('Scripts','',false);
        mainMenu.addItem ('Menu','menu.html',true);
    mainMenu.addItem ('-','-',false);
    mainMenu.addItem ('Exemples','',true);
        mainMenu.addItem ('Alorda','alorda/index.html',true);
mainMenu.addItem ('Contact','',true);
    mainMenu.addItem ('e-Mail','mailto:mi@email.es',true);

Opciones de los elementos del menú

Se puede mantener la llamada al menú como en las primeras versiones con nombredelmenu.addItem (Text, URL, isLast), pero también se puede ampliar reemplazando URL por un array asociativo, que debe contener obligatoriamente la entrada 'url', y que puede tener las siguientes opciones:

'url'
Entrada obligatoria, puede contener una dirección de internet o una opción de las opciones válidas en URL (a,v,x,-)
'target'
Utilizado cómo el atributo target de un link normal
'winOptions'
Opciones de la ventana abierta con target, siguiendo las normas de window.open en javascript, por ejemplo con 'width=200, height=200, status=no, toolbar=no, resizable=no, location=no, scrollbars=no'
'background'
El color o la imagen de fondo del elemento. Los colores pueden definirse poniendo su valor hexadecimal con una almohadilla delante o uno de los nombres estándard de color (#FFFFFF o white, por ejemplo). Las imágenes tienen que estar definidas en el formato url(animage.gif), tal como está escrito aquí sin espacios.
'backgroundA'
El color o la imagen de fondo del elemento cuando el cursor está encima
'txtcolor'
Color del texto del elemento
'txtacolor'
Color del texto del elemento cuando el cursor está encima
'image'
Imagen que se puede ver a la derecha del menú, o a la izquierda en los menús que se abren hacia ese lado
'imageA'
La imagen citada antes, cuando el cursor está encima
'width'
Anchura del elemento, debe ser igual en todos los elementos de un submenú
'height'
Altura del elemento
'align'
Alineación del texto del elemento, las opciones son left (izquierda), center (centrado) y right (derecha)
'font-family'
Cualquier definición válida siguiendo las normas CSS
'font-size'
Se recomienda utilizar una medida en píxels en el formato definido por CSS, por ejemplo: 12px
'title'
Título que se verá en la barra de estado del navegador.
'padding'
Espacio entre el borde y el contenido del elemento, si se pone un solo número se aplicará a todos los lados, si se pone un array, por ejemplo [3,3,3,3] , se define por separado cada lado, correspondiendo a [arriba,derecha,abajo,izquierda]
'onclick'
Una llamada a una función personal, si se tienen que pasar cadenas a la función debe hacerse con comillas simples precedidas por una barra invertida
'onmouseover'
Una llamada a una función personal
'onmouseout'
Una llamada a una función personal
'nextOpenDir'
Sólo se puede usar cuando url está vacio, indica la dirección de apertura del menú, las opciones son right (derecha) o left (izquierda)

Un ejemplo de código:

mainMenu.addItem ('Nombre',{'url':'pagina.html', 'target':'minuevaventana', 'background':'#FFFFCC', 'backgroundA:'#CCFFFF', 'txtcolor':'gray', 'txtacolor':'#000000', 'width':100, 'height':25, 'winOptions':'scrollbars=yes,status=yes,width=300,height=300', 'onclick':'alert (\'Hello world!\')','onmouseover':'funcion_encima (\'mis datos\')','onmouseout':'funcion_fuera (\'mis datos\')','image':'url(animage.gif)','imageA':'url(anotherimage.gif)'},false);

Menú en diferentes frames

Este sería un ejemplo sencillo del documento que define el frameset:

<html>
<head>
<title>T&iacute;tulo de la p&aacute;gina</title>
<script language="JavaScript1.2" src="imaginatic_menu.js"></script>
<script language="JavaScript1.2" src="imaginatic_menuframes_def.js"></script>
</head>
<frameset rows="125,*" cols="*">
<frame src="menu.html" name="menuframe" scrolling="no" noresize>
<frame src="doc.html" name="submenuframe">
</frameset>
</html>


Donde "imaginatic_menuframes_def.js" es el nombre de la definición del menú. El menú se define igual que la versión sin frames con la salvedad que no debe contener la llamada final a doMenu (), ni el código que controla la pulsación del ratón. Debe añadirse a esta definición las siguientes preferencias, con los nombres de los frames respectivos donde va el menú inicial y en el que se muestran los submenús:

this.frameMenu = 'menuframe';
this.frameSubMenu = 'submenuframe';


En los dos documentos que contienen el menú debemos poner el siguiente código después de la definición body de las páginas (en nuestro ejemplo menu.html y doc.html), o en el lugar donde queramos que aparezca el menú si es relativo:

<script type="text/javascript" language="Javascript">
<!--
parent.mainMenu.doMenu(window.name);
if (document.layers){
    document.onMouseDown = parent.hideMenus;
} else {
    document.onclick = top.hideMenus;
}
// -->
</script>


Es importante recordar que no se pueden mostrar en el frame donde aparecen los submenús páginas que no contengan la llamada a doMenu () como puedan ser páginas externas, en tal caso el menú no se activaría y daría un error, si es necesario abrir páginas que no tengan esta llamada utilizar la opción ‘target’:’_blank’ o ‘target’:’_parent’.

Configuración de You are here

Con esta característica el usuario puede entender de una forma visual donde está dentro de la estructura del sitio. Cuando el cursor pasa por encima del icono el menú se abre hasta el submenú que contiene la referencia a la página actual. Para activarlo poner, en el lugar donde queramos que se vea, este código:

menuName.youAreHere (nombre,izquierda,arriba,ancho,alto,texto,color,posicionamiento,ventana);

por ejemplo:

mainMenu.youAreHere ('yah',5,190,110,25,'Vd. est&aacute; aqu&iacute;','#FFFFCC','relative',window);