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;
true
el menú se cierra pasados unos determinados
segundos sin que el cursor este encima del menúvar autoHide_seconds = 6;
this.m_vertical = true;
true
el primer nivel de menú (el que está
siempre visible) tiene una disposición vertical, si el valor es false
el menú es horizontalthis.m_width = 100;
this.m_height = 25;
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;
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 actualthis.default_cursor ='default';
this.link_cursor = 'pointer';
this.sm_direction = 'right';
right
(derecha) y left
(izquierda)this.base_url = 'http://mi.pagina.es/pruebas/';
this.default_main_page = 'index.html';
this.positioning = 'absolute';
absolute
o relative
, funciona igual que en CSS. Los menús que utilzan
dos frames sólo pueden ser absolutosthis.internal_browse_active = true;
this.base_url_active = true;
false
como valorthis.frameMenu = 'noFrames';
noFrames
si el menú se abre en una sola páginathis.frameSubMenu = 'noFrames';
noFrames
si el menú se abre en una sola páginathis.l_m_background = '#99CCCC';
transparent
si no se quiere fondo
o un color válidothis.l_m_border = '2px outset #FFFFFF';
this.l_m_border_top = this.l_m_border;
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;
this.m_align = 'center';
center
, right
, left
this.m_padding = 3;
[3,5,3,5]
, que corresponde a
[arriba,derecha,abajo,izquierda]
this.m_background = '#3333AA';
url(images/fondo.gif)
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';
none
(sin decorar)
o underline
(subrayado)
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';
this.sm_align = null;
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;
m_padding
para explicaciónthis.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';
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';
this.txt_i_font_family = this.txt_font_family;
x
en la definición
del elemento)this.txt_i_font_size = this.txt_font_size;
this.txt_i_color = 'gray';
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)';
v
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)';
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'
URL
(a,v,x,-)'target'
'winOptions'
'width=200,
height=200, status=no, toolbar=no, resizable=no, location=no, scrollbars=no'
'background'
'backgroundA'
'txtcolor'
'txtacolor'
'image'
'imageA'
'width'
'height'
'align'
'font-family'
'font-size'
'title'
'padding'
'onclick'
'onmouseover'
'onmouseout'
'nextOpenDir'
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ítulo de la pá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á aquí','#FFFFCC','relative',window);