This is a powerful component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
Dependencies:
none
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:"auto", // or number
hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
});
or you can call it as contextual menu:
$(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: (String: url)
is the ajax page that build this level menu structure;
additionalData: (String: request params sintax)
are additional data needed to build the menu, by default it send only the actual menuline id on the request;
openOnRight: (Bulean)
let the menus open on the right side instead bottom;
openOnClick: (Bulean)
define if the menu is opened by a mouse click or by a mouseover event;
hasImages: (Bulean)
define if the menu voices have images or not;
menuSelector: (String)
is the css class applied to the menu container
closeOnMouseOut: (Bulean)
define if the menu is closed by a mouse click on the page or by a mouseout event;
closeAfter: (int: time in milliseconds)
the time to whait befor close the menu (works just if closeOnMouseOut is set to true)
fadeInTime: (int: time in milliseconds)
the time to fade the menu in
fadeOutTime: (int: time in milliseconds)
the time to fade the menu out
onContextualMenu: (function)
A function invoked once the contextualMenu is called;
hoverIntent: (int) 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!
minZindex: ("auto" or int) New!
this parm axcept "auto" or a int value; if set to "auto" the zIndex of the opened menu is automatically evaluated, otherwise it's set to the param value.
here is the code for each menu header:
<!-- menu voices -->
<div class="myMenu">
<table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr>
<td menu="menu_12" >ajax menu 1</td>
<td menu="menu_2" >menu 2</td>
<td menu="menu_3" >menu 3</td>
</tr></table>
</div>
<!-- end menu voices -->and for each submenu:
<!-- example code -->
<div id="menu_1" class="menu">
<a rel="title" >title menu_1.1</a> <!-- menuvoice title-->
<a href="../mb_carusel/carousel.html" target="_blank" img="image.gif" >menu_1.1 (href)</a> <!-- menuvoice with href-->
<a action="document.title=('menu_1.2')" >menu_1.2</a> <!-- menuvoice with js action-->
<a rel="separator"></a> <!-- menuvoice separator-->
<a action="document.title=('menu_1.3')" disabled=true>menu_1.3</a> <!-- menuvoice disabled-->
<a action="document.title=('menu_1.4')" menu="menu_1" img="image.png">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
</div>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!
demo page:http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/