Recent news

Monday, 2 May 2016

jQuery MB Menu Plugin To Display Multilevel Menu By Section

jQuery Mb menu is a multilevel dropdown menu. This menu works on mouse over. This plugin support the multiple teams by applying css.

How To Use

1. Add the below mention library referenc

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

2. Use the below code to perform operation 

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EDEDED">
        <td valign="bottom">
            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="container">
                    <td class="myMenu" align="right">


                        <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'>
                                <td class="rootVoice {menu: 'menu_1'}">ajax menu 12</td>
                                <td class="rootVoice {menu: 'menu_2'}">menu 2</td>
                                <td class="rootVoice {menu: 'menu_3'}">menu 3</td>
                                <td class="rootVoice {menu: 'empty'}" onclick="'','ww');">menu 4 empty</td>


<div id="menu_1" class="menu">
    <a data-type="title">title menu_1.1</a>
    <a href="#" class="{img: 'ico_view.gif'}">menu_1.1 (href target _self) </a>
    <a class="{action: 'document.title=(\'menu_1.2\')'}">menu_1.2</a>
    <a data-type="separator"> </a>
    <a href="#" class="{action: 'document.title=(\'menu_1.3\')', disabled:true}">menu_1.3</a>
    <a class="{action: 'document.title=(\'menu_1.4\')', menu:'menu_1', img: '24-book-blue-check.png'}">menu_1.4</a>

3. Below code to display the menu
  $(function () {
            template: "menuVoices.html",
            additionalData: "pippo=1",
            menuWidth: 250,
            openOnRight: false,
            menuSelector: ".menuContainer",
            iconPath: "ico/",
            hasImages: true,
            fadeInTime: 300,
            fadeOutTime: 100,
            adjustLeft: 2,
            minZindex: "auto",
            adjustTop: 10,
            opacity: .95,
            shadow: false,
            hoverIntent: 200,
            openOnClick: false,
            closeOnMouseOut: true,
            closeAfter: 500,
            submenuHoverIntent: 100
    //this function get the id of the element that fires the context menu.
    function testForContextMenu(el) {
        if (!el) el = $.mbMenu.lastContextMenuEl;
        alert("the ID of the element is:   " + $(el).attr("id"));

Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles