mapbMenu is a customizable menu that allows to many submenus, several menus by page and to place it in vertical or horizontal position. So much Explorer as Netscape can be used, from version 4 of both navigators.

In order to create a menu it is necessary to put the following code in the page:

In the head (between marks HEAD):

<script language="JavaScript1.2" src="mapb_menu.js"></script>
<link rel=stylesheet type="text/css" href="mapb_menu_style.css">

In the body of the document (between marks BODY) the reference to the file that defines the menu:

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

File that contains this code:

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;
}

Fig. 1 Definition of the menu.

To adapt the menu to your content observes the previous example. We have added tabulations to make more maintainable the menu, does not affect its behaviour. First, we must define the menu, this becomes, like in the first line of the previous code, with nameofmenu = new Menu ('nameofmenu', left, top). It is important to remember that javaScript is case sensitive, so the name of the menu has to be equal whenever we wrote it, so much in the creation of the menu like more ahead. The properties left and top indicate the situation of the menu. Whenever we wrote nameofmenu.addItem (Text, URL, isLast) we are adding a new entry in the menu. When property URL is empty we are defining that the following line is a new submenu. When isLast is equal to true the entry is the last one of a submenu (see Fig. 1).

Other useful norms: When URL is equal to 'x', or when URL is equal to the direction of the present page, the entry will be deactivated. When Text and URL are equal to '-' the entry is a separator. When URL is equal to 'v' the entry is the active option (see above the languages menu for an example).

The function doMenu () creates the menu and it shows it in screen. The last lines of code are a control so that the menu closes when doing click in any other element of the document.

In order to modify the aspect and behaviour of the menu we must modify the following lines of the document mapb_menu.js, and the definitions of style of the document mapb_menu_style.css:

//behaviour
var autoHide_activate = true; // If true the menu hides after the number of
var autoHide_seconds = 6;     // seconds defined in autoHide_seconds, since
                              // 0.8.7 update it can be 0.01 or greater
//prefs
this.m_vertical = true;                         // If true menu is vertical
this.sm_width = 112;                            // Width of submenu items
this.sm_height = 25;                            // Height of submenu items
this.h_offset = -3;                             // Horizontal offset
this.v_offset = 3;                              // Vertical offset
this.sm_border = 2;                             // Submenu border. Even or 0
this.l_m_color = '#FF9933';                     // If sm_border > 0 border
// or this.l_m_color = 'url(images/fons_off.gif)'    color or image of initial menu 
this.l_sm_color = '#CCFFFF';                    // If sm_border > 0 border
                                                //    color of submenus
this.m_color  = '#3333AA';                      // Color of initial menu
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.sm_color = '#FFCC99';                      // Item color of submenus
this.sm_a_color = '#FFFF99';                    // Item color when mouseOver
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;                          // Text weight
this.txt_link_weight = 900;                     // Mouseover link weight
this.txt_decoration = 'none';                   // Text decoration
this.txt_link_decoration = 'none';              // Mouseover link decoration
this.link_cursor = 'pointer';                   // Mouseover cursor
this.m_dec = '|';                               // Right decoration of menu
this.sm_sep = 'url(images/sep.gif)';            // Separator Image
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';                 // Style variables of font
this.submenu_back_st = 'submenuBackSt';         //     and another preferences
this.menu_st = 'menuSt';                        //     in mapb_menu_style.css
this.submenu_st = 'submenuSt';                  //
this.submenu_st_inactive = 'submenuStInactive'; //
this.sm_direction = 'right';
this.vertical_adjust = 0;
this.horizontal_adjust = 0
New in 0.8.7 Update
this.m_bottom_decor = [0,'solid','#000000']; //bottom decoration of items of menu
this.sm_bottom_decor = [2,'inset','#FFFFFF']; //bottom decoration of items of submenu
//

From version 0,8 it can have background images, aside from colors, to do it instead of write, for example, this.sm_color = '#FFCC99' we will write this.sm_color = 'url(images/fons_on.gif)'.

In order to make more flexible the creation of the menus at any time some parameter in the same definition of the menu can be modified, like in the second menu of the following example:

//First menu
alordaMenu = new Menu ('alordaMenu',0,0);

//First 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();

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

//Prefs
plantes.m_vertical = false;
plantes.l_m_color = 'url(images/fons_off.gif)';
plantes.l_sm_color = 'url(images/fons_off.gif)';
plantes.m_color = 'url(images/fons_off.gif)';
plantes.sm_color = 'url(images/fons_off.gif)';
plantes.sm_a_color = 'url(images/fons_on.gif)';

//Second Menu definition
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;
}

In the previous example we can see as in a same page we can put a standard menu and a second menu with different properties, in this case in horizontal position and different colors. Only lack does to add properties of script that we want that they are different, changing where it puts this by the name of the menu.

mapbMenu Version 0.9 documentation (1/2)

download (70 kb)

Part of mapbDhtml website, maintained by Miquel Angel Pintanel. Last update:  09/02/2003 . Url: http://perso.wanadoo.es/mapintanel/mapbdhtml/menu.html e-mail: mapbdhtml@wanadoo.es