Go to the component page for the latest update:

http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/

Now is

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of  “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

go to the component page for the latest release

Dependencies:

optional: jquery.metadata.plugin

optional: jquery.hoverIntent.plugin

here is the js call:


$(".myMenu").buildMenu(
{
template:"menuVoices.jsp",
additionalData:"",
menuWidth:200,
openOnRight:false,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
fadeInTime:200,
fadeOutTime:100,
adjustLeft:2,
adjustTop:10,
opacity:.95,
shadow:true,
closeOnMouseOut:true,
closeAfter:500,
minZindex:200,
hoverIntent:0
});

or you can call it as contextual menu:

(can’t work in opera due to a security restriction)

$(document).buildContextualMenu(
{
template:"menuVoices.html",
menuWidth:200,
overflow:2,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:false,
fadeInTime:200,
fadeOutTime:100,
adjustLeft:0,
adjustTop:0,
opacity:.99,
shadow:true,
onContextualMenu:function(o,e){}
});


params:

template:

is the ajax page that build this level menu structure ;
If the menu you are calling is not on the page, the component automatically will try to build it calling via Ajax the “template” page, passing the ID of the menu you call in the request (“menuId”).
The temlate page should be a dinamic page (php, jsp, aspx, …) that’ll build the menu from the ID param passed in the request.

If you are a beginner on javascript and coding in general just write your menu code directly on your page; it’s easyer!

additionalData:

are additional data needed to build the menu, by default it send the actual menuline id;
If you need some other params to be passed to the template page to build your menu you can set them here, writing them like: “pippo=1&pluto=false”;

openOnRight:

let the menus open on the right side instead bottom;

openOnClick:

define if the menu is opened by a mouse click or by a mouseover event;

hasImages:

define if the menu voices have images or not on its left;

menuSelector:

is the css class applied to each menu container of this menu context;

closeOnMouseOut:

the menu can be close either onclik on the window or just when your mouse exit the menu

closeAfter:

the time to whait befor close the menu (works just if closeOnMouseOut is set to true)

fadeInTime / fadeOutTime:

those params control the speed of the opening and closing fade effect.

hoverIntent: (New!)

this param sets the delay for the hover event; if set to 0 the hoverIntent function is not used.
To use this feature you have to include the jquery.hoverIntent plug in in your page!

submenuHoverIntent: (New!)

this param sets the delay for the hover event on submenu calls; if set to 0 the hoverIntent function is not used.
To use this feature you have to include the jquery.hoverIntent plug in in your page!

onContextualMenu:

A function invoked once each contextualMenu is called;
the function has either the dom element you clicked on, either the event:
onContextualMenu:function(o,e){
testForContextMenu(o);
},

here is the code for each menu header:

and for each submenu:

How to use it:

header

The menu header shouldn’t necessarely be a table (also an unordered list or what else you want).
to append a menu to each voice of the header you simply add an attribute “menu” to the tag with the ID of the menu you want as value; if the menu already exist in the page it get it otherwise it’ll be called via ajax at the url specified in the “template” attribute.

each menu

Each menu is a div with an ID that represent the content you want to call and a class “menu”; this div contains all the voices of the menu as “a” tag.
Give a look at the code to understand all the possible definition of each voice line!