(mb)Menu – Menú multinivel y contextual con jQuery

(mb)Menu es un plugin para jQuery para implementar un menú multinivel y contextual.

Implementación

Primero hay que enlazar en la sección HEAD del HTML de la página todos los archivos necesarios (JS, CSS, etc):

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.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/menu1.css" media="screen" />

Llamadas al archivo JS

Código Javascript que llama a la biblioteca:

$(”.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, //con jquery.hoverIntent.js tiempo en milliseconds; 0= false;});

Código para menú contextual

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

Código HTML para implementar el menú

Cada menú es un DIV con un ID que representa el contenido que queremos llamar y un menú clase.

Multilevel menú:

<!-- menu voices -->
<div>
<table 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 -->

Menú contextual:

<!-- example code -->
<div id="menu_1">
<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>

(mb)Menu

Sitio: pupunzi.open-lab.com

Documentación: code.google.com/p/mbideasproject/wiki/mbmenu

Demo: pupunzi.com/#mb.components/mb._menu/menu.html