JQUERY: Multilevel Tree Menu Plugin!!

  • Published on Wednesday, 15 August 2012 04:23
  • Hits: 2052
User Rating:  / 0
PoorBest 

Now its time to have a Multilevel Tree Menu with Jquery!!!.


It builds a menu from a table as this for first level, although also a list should work:


<div class="myMenu">
<table cellspacing='0' cellpadding='0' border='0'>
<tr>
<td menu="menu_1">Freakzion</td>
<td menu="menu_2">PressXine</td>
<td menu="menu_3">Jquery</td>
</tr>
</table>
</div>


and rest of level for option menu_1 should be as this: (different examples)


<div id="menu_1" class="menu">
<a rel="title" >title menu_1.1</a>
<a href="/../mb_carusel/carousel.html"
target="_blank" img="image.gif" >menu_1.1 (href)</a>
<a action="document.title=('menu_1.2')">menu_1.2</a>
<a rel="separator"></a>
<a action="document.title=('menu_1.3')" disabled=true>menu_1.3</a>
<a action="document.title=('menu_1.4')" menu="menu_1"
img="image.png">menu_1.4</a>
</div>



To gererate the menu from this just execute the next method for the element (in this case "myMenu"):


$(".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
});

The details for each of the options of the method are totally describe at the plugin page.



As usual do no forget to include at the HEAD of your html the javascript and css files:


<script type="text/javascript" src="/inc/mbMenu.js"></script>
<script type="text/javascript" src="/inc/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="/inc/jquery.metadata.js"></script>
<link rel="stylesheet" type="text/css" href="/css/menu1.css" media="screen" />



I miss some examples of styles change and possibilities, as well as it is a bit heavy library, ..but as usual sneak into de code and say thanks to its creator!! :)