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="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></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">
    <tr>
        <td valign="bottom">
            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="container">
                <tr>
                    <td class="myMenu" align="right">

                       

                        <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'>
                            <tr>
                                <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="window.open('http://www.pupunzi.com','ww');">menu 4 empty</td>
                            </tr>
                        </table>

                       

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<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>
</div>

3. Below code to display the menu
  
  $(function () {
        $(".myMenu").buildMenu(
        {
            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.

Previous
Next Post »

E-mail Newsletter

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

Recent Articles