ดาวน์โหลดฟรี

ดาวน์โหลด multilevel tree menu jQuery
เข้าชมทั้งหมด : 781 ครั้ง | ดาวน์โหลด : 152 ครั้ง | หมวด : Menu & Navigation


multilevel tree menu jQuery

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

JS call for the menu:

 

 

01 $(".myMenu").buildMenu({
02        template:"yourMenuVoiceTemplate",
03        additionalData:"",
04        menuSelector:".menuContainer",
05        menuWidth:150,
06        openOnRight:false,
07        containment:"window",
08        iconPath:"ico/",
09        hasImages:true,
10        fadeInTime:100,
11        fadeOutTime:200,
12        menuTop:0,
13        menuLeft:0,
14        submenuTop:0,
15        submenuLeft:4,
16        opacity:1,
17        shadow:false,
18        shadowColor:"black",
19        shadowOpacity:.2,
20        openOnClick:true,
21        closeOnMouseOut:false,
22        closeAfter:500,
23        minZindex:"auto",
24        hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
25        submenuHoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
26    });

 

JS call for the contextualmenu:

 

 

01 $(document).buildContextualMenu({
02     template:"yourMenuVoiceTemplate",
03     additionalData:"",
04     menuSelector:".menuContainer",
05     menuWidth:150,
06     openOnRight:false,
07     containment:"window",
08     iconPath:"ico/",
09     hasImages:true,
10     fadeInTime:100,
11     fadeOutTime:200,
12     menuTop:0,
13     menuLeft:0,
14     submenuTop:0,
15     submenuLeft:4,
16     opacity:1,
17     shadow:false,
18     shadowColor:"black",
19     shadowOpacity:.2,
20     openOnClick:true,
21     closeOnMouseOut:false,
22     closeAfter:500,
23     minZindex:"auto",
24     hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
25     submenuHoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
26     onContextualMenu:function(o,e){} //it pass 'o' (the menu you clicked on) and 'e' (the event)
27 });

 

HTML constructor for the header:

 

 

1 <div class="myMenu">
2    <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'>
3      <tr>
4        <td class="rootVoice {menu: 'menu_12'}" >ajax menu 12</td>
5        <td class="rootVoice {menu: 'menu_2'}" >menu 2</td>
6        <td class="rootVoice {menu: 'menu_3'}" >menu 3</td>
7        <td class="rootVoice {menu: 'empty'}" onclick="window.open('http://www.open-lab.com','ww');">menu 4 empty</td>      </