|
mapbMenu es un menú configurable que permet múltiples nivells, varis menús per pàgina i colocar-lo en posició vertical o horitzontal. Es pot utilitzar tant en Explorer com en Netscape, a partir de la versió 4 dels dos navegadors. Per crear un menú heu de col.locar el següent codi a la vostra pàgina: Dins de la capçalera (entre les marques HEAD): <script language="JavaScript1.2" src="mapb_menu.js"></script> <link rel=stylesheet type="text/css" href="mapb_menu_style.css"> Dins el cos del document (entre les marques BODY) la referència a l'arxiu que defineix el menú: <script language="JavaScript1.2" src="mapb_menu_def.js"></script> Arxiu que conté aquest codi:
alordaMenu = new Menu ('alordaMenu',0,0);
//Menu definition
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();
//control
if (document.layers){
document.onMouseDown = hideMenus;
} else {
document.body.onclick = hideMenus;
}
Per adaptar el menú als vostres continguts
ens hem de fixar en l'exemple anterior. Hem afegit tabulacions per
fer més mantenible el menu, no afecten al seu funcionament.
Primer de tot hem de definir el menu, això es fa, com a la
primera línia del codi anterior, amb Altres normes útils: Quan La funció Per modificar l'aspecte i comportament del menú
heu modificar les següents línies del document
//comportament
var autoHide_activate = true; // Si és true el menu s'oculta després del
var autoHide_seconds = 6; // nombre de segons definit a autoHide_seconds, des del
// 0.8.7 update pot ser 0.01 o mŽs gran
//prefs
this.m_vertical = true; // Si true menú vertical
this.sm_width = 112; // Amplada entrades submenús
this.sm_height = 25; // Alçada entrades submenús
this.h_offset = -3; // Offset horitzontal
this.v_offset = 3; // Offset vertical
this.sm_border = 2; // Vora dels submenús. Parell ó 0
this.l_m_color = '#FF9933'; // Color fons menú inicial
// quan sm_border > 0
this.l_sm_color = '#CCFFFF'; // Color fons submenús
// quan sm_border > 0
this.m_color = '#FF9933'; // Color menú inicial
this.sm_color = '#FFCC99'; // Color entrades 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'; // Decoració del text
this.txt_link_decoration = 'none'; // Mouseover link decoració
New in 0.8.7 Update
this.m_bottom_decor = [0,'solid','#000000']; //decoració inferior items menú
this.sm_bottom_decor = [2,'inset','#FFFFFF']; //decoració inferior items submenú
//
this.link_cursor = 'pointer'; // Mouseover cursor
this.m_dec = '|' // Decoració dreta del menu
this.sm_sep = 'url(images/sep.gif)'; // Imatge que fa 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 d'estil
this.submenu_back_st = 'submenuBackSt'; // a 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ó 0.8 es poden posar imatges
de fons, a més a més de colors, per a fer-ho enlloc
de posar, per exemple, Per fer més flexible la creació dels menus en qualsevol moment es pot modificar algun paràmetre en la mateixa definició del menu, com en l'exemple següent:
//Primer menú
alordaMenu = new Menu ('alordaMenu',0,0);
//Definició 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();
//Segon 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ó segon 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;
}
A l'exemple anterior podem veure com en una mateixa
pàgina podem posar un menú estàndard i un segon
menú amb propietats diferents, en aquest cas en posició
horitzontal i amb colors diferents. Com es pot veure només
cal afegir les propietats de l'script que volem que varïin,
canviant on posa Podeu descarregar els arxius necessaris pitjant aquí (70 kb) mapbMenu Versión 0.8 documentación (1/2)
Parte del website mapbDhtml, mantenido por Miquel Angel Pintanel. Actualizado: 2-09-2003 . Url: http://perso.wanadoo.es/mapintanel/mapbdhtml/ca/menu.html e-mail: mapbdhtml@wanadoo.es |
