|
mapbMenu 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 tanto con Explorer como con Netscape, a partir de la versión 4 de los dos navegadores. Para crear un menú hay que poner el siguiente código en la página: En la cabecera (entre las marcas HEAD): <script language="JavaScript1.2" src="mapb_menu.js"></script> <link rel=stylesheet type="text/css" href="mapb_menu_style.css"> En el cuerpo del documento (entre las marcas BODY) la referencia al archivo que define el menú: <script language="JavaScript1.2" src="mapb_menu_def.js"></script> Archivo que contiene este código:
alordaMenu = new Menu ('alordaMenu',0,0);
//Menu definition
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;
}
Para adaptar el menú a vuestro contenido fijémonos
en el ejemplo anterior. Hemos añadido tabulaciones para hacer
más mantenible el 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 Otras normas útiles: Cuando La función Para modificar el aspecto y el comportamiento del
menú tenemos que modificar las siguientes líneas del
documento
//comportamiento
var autoHide_activate = true; // Si es true el menu se oculta después de
var autoHide_seconds = 6; // los segundos definidos en autoHide_seconds, desde el
// 0.8.7 update puede ser 0.01 o mayor
//prefs
this.m_vertical = true; // Si true el menú es vertical
this.sm_width = 112; // Ancho entradas submenús
this.sm_height = 25; // Altura entradas submenús
this.h_offset = -3; // Offset horizontal
this.v_offset = 3; // Offset vertical
this.sm_border = 2; // Borde de submenú. Par ó 0
this.l_m_color = '#FF9933'; // Si sm_border > 0 color
// fondo menú inicial
this.l_sm_color = '#CCFFFF'; // Si sm_border > 0
// Color fondo submenús
this.m_color = '#FF9933'; // Color menú inicial
this.sm_color = '#FFCC99'; // Color entradas submenús
this.sm_a_color = '#FFFF99'; // Color entrada activa
this.m_a_color = '#3333AA'; // Initial Menu when mouseOver
this.m_txt_color = '#FFFFCC'; // Initial text color
this.m_txt_a_color = '#FFFFCC'; // Initial mouseOver text color
this.m_txt_weight = 900; // Initial text weight
this.m_txt_link_weight = 900; // Mouseover link weight
this.m_txt_decoration = 'none'; // Initial text decoration
this.m_txt_link_decoration = 'none'; // Mouseover link decoration
this.txt_color = 'black'; // Color del submenu
this.txt_a_color = 'white'; // Color of mouseover
this.txt_i_color = 'gray'; // Color of inactive items
this.txt_weight = 900; // Grosor texto
this.txt_link_weight = 900; // Mouseover link grosor
this.txt_decoration = 'none'; // Decoration del texto
this.txt_link_decoration = 'none'; // Mouseover link decoraci—n
this.link_cursor = 'pointer'; // Mouseover cursor
New in 0.8.7 Update
this.m_bottom_decor = [0,'solid','#000000']; //decoración inferior items menú
this.sm_bottom_decor = [2,'inset','#FFFFFF']; //decoración inferior items submenú
//
this.m_dec = '|' // Decoración derecha del menu
this.sm_sep = 'url(images/sep.gif)'; // Imagen que hace de separador
this.sm_arrow = 'url(images/f_dreta.gif)'; // Arrow image
this.sm_a_arrow = 'url(images/f_dreta.gif)'; // Arrow image highlighted
this.sm_left_arrow = 'url(images/f_dreta.gif)'; // Arrow image
this.sm_a_left_arrow = 'url(images/f_dreta.gif)'; // Arrow image highlighted
this.menu_back_st = 'menuBackSt'; // Variables de estilo
this.submenu_back_st = 'submenuBackSt'; // de mapb_menu_style.css
this.menu_st = 'menuSt'; //
this.submenu_st = 'submenuSt'; //
this.submenu_st_inactive = 'submenuStInactive'; //
this.sm_direction = 'right';
this.vertical_adjust = 0;
this.horizontal_adjust = 0
A partir de la versión 0.8 se pueden poner
imágenes de fondo, aparte de colores, para hacerlo en lugar
de poner, por ejemplo, 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 segundo menu del ejemplo siguiente:
//Primer menú
alordaMenu = new Menu ('alordaMenu',0,0);
//Definición primer menú
alordaMenu.addItem ('Index','',false);
alordaMenu.addItem ('Homepage','x',false);
alordaMenu.addItem ('Scripts','',false);
alordaMenu.addItem ('Menu','menu.html',true);
alordaMenu.addItem ('-','-',false);
alordaMenu.addItem ('Exemples','',true);
alordaMenu.addItem ('Alorda','alorda/index.html',true);
alordaMenu.addItem ('Contact','',true);
alordaMenu.addItem ('e-Mail','mailto:mapintanel@wanadoo.es',true);
alordaMenu.doMenu();
//Segundo menú
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';
//Definición segundo menú
plantes.addItem ('Plantes','',true);
plantes.addItem ('General','gen.html',false);
plantes.addItem ('Segle IV','segleiv.html',false);
plantes.addItem ('Segle III','segleiii.html',true);
plantes.doMenu();
//control
if (document.layers){
document.onMouseDown = hideMenus;
} else {
document.body.onclick = hideMenus;
}
En el ejemplo anterior podemos ver como en una misma
página podemos poner un menú estandard y un segundo
menú con propiedades diferentes, en este caso en posición
horizontal y colores diferentes. Sólo hace falta añadir
las propiedades del script que queremos que varien, cambiando donde
pone
mapbMenu Versión 0.8 documentación (1/2) download (70 kb) Parte del website mapbDhtml, mantenido por Miquel Angel Pintanel. Actualizado: 24-12-2001. Url: http://perso.wanadoo.es/mapintanel/mapbdhtml/es/menu.html e-mail: mapbdhtml@wanadoo.es |
