Matteo Bicocchi's Blog

mb.ideas.repository

jquery mb.menu

with 108 comments


mbmenu

Valid XHTML 1.0 Transitional

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

You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of  “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

demo page:

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

jQuery project page:
http://plugins.jquery.com/project/mbMenu

download example:
http://mbideasproject.googlecode.com/files/jquery.mb.menu.2.7.2b.zip

documentation:
http://code.google.com/p/mbideasproject/wiki/mbmenu

Releases:

2.7.2  (NEW!) bugfix:

  • if property openOnClick was set to true and there was an empty root menu, once you get out from the empty root menu it didn’t unselect his state.
  • Managed menuvoices with A HREF attr.  Now when a menuvoice has an A HREF it remains an A HREF
2.7 Minor bugfix:

  • IE7 and 8 bug:
    Fixed the wrong positioning of the contextualMenu if the page was scrolled.
2.6.1 
Major bugfix:

  • Firefox 3.5 Bug:
    Opening the contextual menu, it suddenly closes.
Dependencies:

optional: jquery.metadata.plugin

optional: jquery.hoverIntent.plugin

here is the js call:


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

or you can call it as contextual menu:

(can’t work in opera due to a security restriction)

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

params:

template:

is the ajax page that build this level menu structure ;
If the menu you are calling is not on the page, the component automatically will try to build it calling via Ajax the “template” page, passing the ID of the menu you call in the request (“menuId”).
The temlate page should be a dinamic page (php, jsp, aspx, …) that’ll build the menu from the ID param passed in the request.

If you are a beginner on javascript and coding in general just write your menu code directly on your page; it’s easyer!

additionalData:

are additional data needed to build the menu, by default it send the actual menuline id;
If you need some other params to be passed to the template page to build your menu you can set them here, writing them like: “pippo=1&pluto=false”;

openOnRight:

let the menus open on the right side instead bottom;

openOnClick:

define if the menu is opened by a mouse click or by a mouseover event;

hasImages:

define if the menu voices have images or not on its left;

menuSelector:

is the css class applied to each menu container of this menu context;

closeOnMouseOut:

the menu can be close either onclik on the window or just when your mouse exit the menu

closeAfter:

the time to whait befor close the menu (works just if closeOnMouseOut is set to true)

fadeInTime / fadeOutTime:

those params control the speed of the opening and closing fade effect.

hoverIntent: (New!)

this param sets the delay for the hover event; if set to 0 the hoverIntent function is not used.
To use this feature you have to include the jquery.hoverIntent plug in in your page!

submenuHoverIntent: (New!)

this param sets the delay for the hover event on submenu calls; if set to 0 the hoverIntent function is not used.
To use this feature you have to include the jquery.hoverIntent plug in in your page!

onContextualMenu:

A function invoked once each contextualMenu is called;
the function has either the dom element you clicked on, either the event:
onContextualMenu:function(o,e){
testForContextMenu(o);
},

here is the code for each menu header:

<!-- 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 –>

and for each submenu:

<!-- 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>

How to use it:

header

The menu header shouldn’t necessarely be a table (also an unordered list or what else you want).
to append a menu to each voice of the header you simply add an attribute “menu” to the tag with the ID of the menu you want as value; if the menu already exist in the page it get it otherwise it’ll be called via ajax at the url specified in the “template” attribute.

each menu

Each menu is a div with an ID that represent the content you want to call and a class “menu”; this div contains all the voices of the menu as “a” tag.
Give a look at the code to understand all the possible definition of each voice line!

History:

2.6  Minor bugfix:

  • Now if the menu height is more than the page height the menu doesn’t reposition it to let you scroll all the menu voices.

Minor features:
added a new param containment to let the urer choose either the containment is the window (default) or any other element that contains the menu; that’s usefull if you want the menu adapt it’s position related something else that the window.
usage: containment:”your element ID” as param on the menu call function.

2.3 Minor bugfix:

  • There was a problem with contextual menu position on long content pages (the scroll height and width weren’t calculate). solved!

2.2

Minor features:

  • added the support for jquery.hoverIntent.js also for submenu calls:
    setted a new param submenuHoverIntent that axcept int as time in milliseconds for the delay befor shooting the hover event; if you set it to 0 (default) hoverIntent is not used.
    !! important >> To use this param you have to incude the jquery.hoverIntent plug in in your page.

2.0

Major features:

  • if you set openOnClick the menu’ll close even when you click again on the root voice that invoked it.
  • added the support for jquery.hoverIntent.js:
    setted a new param hoverIntent that axcept int as time in milliseconds for the delay befor shooting the hover event; if you set it to 0 (default) hoverIntent is not used.
    !! important >> To use this param you have to incude the jquery.hoverIntent plug in in your page.

1.6.0

  • Major bugfix:
    Now, if closeOnMouseOut is setted, the menu will close when you leave the root menu voice even if you don’t roll over the opened menu.
  • new feature:
    you can define the fade time for opening and closing events by seting two new params:
    fadeInTime:100, // default
    fadeOutTime:200, // default
  • Now W3C comliant!:
    As for the (mb)ContainerPlus, I used jquery.metadata.js and you can define menu paramiters without writing custom attributes on the tag, but writing them in the class attr. with a JSON sintax: <acolor:#008000;” style=”color: rgb(0, 128, 0); “>{action: ‘document.title=(\’menu_2.1\’)', img: ‘icon_13.png’} “> menu_2.1 </a>
    instead of:
    <a  action= “document.title=(‘menu_2.1′)” img= “icon_13.png” >menu_2.1</a>You can still use both sintax, but if you want to be w3c compliant than you nee the second one and you have to include jquery.metadata.js in your page.

1.5.4

  • Major bugfix:
    IE and contextualmenu bugfix;
    fixed a code error that prevented IE to show the contextual menu.

1.5.3

  • add a feature:
    Now you can set to “auto” the param minZindex and the component’ll set automatically the highest zindex to the menu.

1.5.1

  • Now you can have a root menu emty (with a direct lnk for example) that behave as the other menu in the same group.
    <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>
    <td menu=”empty“
    onclick=”window.open (‘http://www.open-lab.com’,'ww’)”>
    menu 4 empty
    </td>
    </tr></table>
  • fixed a bug on close of menu with closeOnMouseOut set to true and other menu istances in the same page.
  • Cleaned the param: rootMenuSelector it’s not used anymore.
  • Minor bugfix.

1.5

  • three new params:
    closeOnMouseOut: false (default) // you can hide the menu onmouseout
    closeAfter: 500 (default) // set the time to wait before closing after you exit the menu
    onContextualMenu: function(o,e){} // a function to be called on contextualMenu
  • Now the onclick action is extended to the whole voice line.
  • If you set an href attribute, it’s managed to the whole line and get the right target
  • When you set a contextualMenu, once you rightClick on the dom element an accessible variable is set ($.mbMenu.lastContextMenuEl);
    so you can build your own function referring to every attribute of your object;
    for example: if you have the same action on the menu voice for all the elements but you need the ID of the dom element you clicked on, you get it in this way:

    $($.mbMenu.lastContextMenuEl).attr("id");

1.0.1

I just update the code with some bug fix:

  1. IE bug for separator line
  2. disabled menuline with href attribute
  3. solved a bag in the case there’s a href with a javascript as url (href=”javascript:…”); now it works!

Written by Matteo Bicocchi

23/09/2009 at 8:24 pm

108 Responses

Subscribe to comments with RSS.

  1. [...] go to the component page for the latest release [...]

    jQuery (mb)Menu 2.7 (New!) « Matteo Bicocchi’s Blog

    02/10/2009 at 9:47 pm

    Reply

  2. [...] | mbMenu [...]

    Crea un menú desplegable fácilmente con mbMenu | Recursos para Diseñadores Gráficos y Web | Creativos Online

    03/10/2009 at 5:20 pm

    Reply

  3. Hi,

    great component!
    I tried to use tags within a … section.
    But they are also translated into menu items.

    I tried this, mbMenu.js line 291:
    this.voices= $(“#”+m).find(“a:not(.noVoice)”).clone();
    But had no luck on Firefox.

    Is there a solution for my problem?

    Best regards,
    schmunk

    schmunk

    03/10/2009 at 8:55 pm

    Reply

    • Hi shmunk,
      actually the menu is generated by all the a voices inside the div you define as “mbmenu”; you could try with: this.voices= $(”#”+m).find(”a”).not(".noVoice").clone(); but this will not create the element at all in the menu…
      Maybe the right way could be define another DOM element as menuvoice… for example: this.voices= $(”#”+m).find(”div”).clone();; in that way you can put whatever you want inside…
      Bye,
      Matteo

      Matteo Bicocchi

      03/10/2009 at 10:17 pm

      Reply

      • Thanks for your help, but I had no luck, neither with not() nor (“div”) :/
        Nevermind, I’ll use javascript for some links.

        Btw: Mbmenu is not XHTML compliant, right?

        schmunk

        05/10/2009 at 1:50 pm

  4. Hi Matt,

    Is it possible to use on-mouse images for the main menu items instead of single images for on/off situation? Maybe via css by sliding each and every button as background?

    Senol Sonek

    09/10/2009 at 11:14 am

    Reply

  5. [...] get it on the component page! Possibly related posts: (automatically generated)jQuery (mb)Menu 2.7 (New!)ASP.NET 2.0 Menu – MenuItemClick not posting back/firing eventBuild a Cross-browser Dropdown Navigation Menu [...]

    jquery mb.menu 2.7.2 (new release) « Matteo Bicocchi’s Blog

    14/10/2009 at 9:24 pm

    Reply

  6. I just found your mb-_menu and its amazing! I’m having some trouble with menuVoice though, every time i add a new div with the id menu_2, menu_3, etc.. I change it in the index.html file but when i pushlish it. When i roll over it types the text from the menuVoices page? .. I’m confused. Does the same in your demo too. bug?

    Shaun

    17/10/2009 at 7:29 am

    Reply

    • Hi Shaun,
      maybe I should see the code you are writing to understand your problem; but I can explain how should it work:
      A) You need the root voices elements where you specify for each which menu they should open in that whay: <td class="rootVoice {menu: 'menu_1'}" >menu 1</td> where the menu parameter value is the ID of the DIV containing the menu voices.
      B) You need a DIV for each menu voices block with a unique ID setted and a class "mbmenu":
      <div id="menu_1" class="mbmenu">
      <a rel="title" class="{action: 'document.title=(\'menu_2.1\')', img: 'icon_13.png'}">menu_2.1 TITLE</a>
      <a class="{action: 'document.title=(\'menu_2.2\')'}">menu_2.2</a>
      <a class="{menu: 'sub_menu_1', img: 'icon_14.png'}">menu_2.3</a>
      <a class="{menu: 'sub_menu_2', img: '24-tag-add.png'}">menu_2.4</a>
      <a rel="separator"> </a>
      <a class="{action: 'document.title=(\'menu_2.4\')'}">menu_2.5</a>
      </div>
      C) The IDs must be unique! and this is important.
      D) if the component doesn’t find the ID specified in the root voice definition than it’ll try to call via Ajax the page specified in the “template” parameter passing the ID as menuId on the request (if you have a dynamic environment you can have a page that build each menu based on the ID).
      E) you need to invoke the function to initialize your menu customizing all the parameters needed.
      That’s all.

      if you have problems you can publish somewhere your page so that I can test and understand what’s wrong.
      Hope this can help you,
      Matteo

      Matteo Bicocchi

      17/10/2009 at 11:23 am

      Reply

      • Ah ok, the class “class=”mbmenu” was missing in menuVoices. It’s missing in the demo files. Confused the hell out of me. Might want to update the demo files just in case others get confused too.

        Cheers mate.

        Shaun

        17/10/2009 at 1:37 pm

  7. Hi Matteo, can mb.menu be used to create a mega menu like found here: http://www.ea.com/ ?

    Mike

    Mike

    26/10/2009 at 9:22 pm

    Reply

  8. Great plugin, thanks!

    I’m trying to get the “selected” state to stay active when on the page of the current link of the rootVoice.
    When the page first loads it’s fine, but if I mouse over it(I have nOnClick:false) and mouse-out, the selected state is removed.

    Here is what I have:
    menu 1

    thanks

    Eric

    28/10/2009 at 2:59 pm

    Reply

    • Hi Eric,
      I’m not really sure what is your issue;
      if you whant to set a specific voice to select when you get into the page there’s no solution at the moment becose the selected class is added dinamically to the container of the row by the component once it builds the menu cotainer.
      I keep it as an issue for next release.
      Bye,
      Mateo

      Matteo Bicocchi

      29/10/2009 at 10:30 pm

      Reply

  9. Hello,
    I have found a bug, menu is very slow when the code page html is big (for example large table on the page)
    it uses 100% of CPU with any movement of the mouse on the page’s space (not the menu itself)

    If you need a sample send me an e-mail and I will send you a file

    Roman

    04/11/2009 at 12:51 pm

    Reply

    • Hi Roman,
      send me the file at matteo[at]open-lab.com.
      Bye
      Matteo

      Matteo Bicocchi

      05/11/2009 at 12:25 am

      Reply

    • Hi Roman,
      I think this depends to the fact that my mb.menu build a table for each single menu line; this is not a problem if in your page you don’t have a huge amount of data otherways it get slower.
      The slow down behavior is when you roll over a submenu voice with a submenu referral (when it open a neu submenu); so if you set the param “submenuHoverIntent” of the init function to “200″, the submenu will not open just rolling over the voice and this speedUp the feeling:

      submenuHoverIntent:200,

      I’ll take this as ISSUE for next release.
      Thnx,
      Matteo

      Matteo Bicocchi

      06/11/2009 at 10:41 pm

      Reply

    • Hi!
      I watched menu with js-profiler in IE 8. There is an expression in buildMbMenu() that uses CPU hard:

      $(opener.menuContainer).find(“#” + m + “_” + i)

      Just store this in local variable and then replace in all cases like this:

      var menuLine = $(opener.menuContainer).find(“#” + m + “_” + i);

      …

      menuLine.find(“.voice a”).wrap(“”);
      menuLine.find(“.menuArrow”).addClass(“subMenuOpener”);
      menuLine.css({ cursor: “default” });

      This easy replacement reduces execution time of buildMbMenu twice!

      Sergey Vostretsov

      30/11/2009 at 7:07 am

      Reply

      • Hi sergey,
        Thanks very much for your contribution!
        this bugfix will be included in next release with a mention to your solution.
        Bye,
        Matteo

        Matteo Bicocchi

        30/11/2009 at 11:01 am

  10. Hi Guys,

    thanks for your great job. I just tried to embed this mbmenu component into my JQuery Sliding Content demo webpage(REF: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding), I cannot make them work together, it seems the JQuery.js from the Slidding demo is pretty different with the JQuery.min.js from the mbmenu demo. Any idea? thanks.
    Dave

    Dave

    04/11/2009 at 11:58 pm

    Reply

    • Hi Dave,
      jquery.mb.menu use the latest version of jQuery code (1.3.2) and Easy Slider jQuery Plugin uses instead the 1.2.3 version;
      you should try to include the latest and see if the slider still works, otherwise you can’t use both together.
      Bye,
      Matteo

      Matteo Bicocchi

      05/11/2009 at 12:20 am

      Reply

      • Unfortunately, I tried both ways, still could not get them working together. yes, I reckon this issue comes from the difference between the js files, what a shame. anyway I will try to jump on JQuery Sliding Demo webpage and to see whether they already get the latest jquery.js invovled. thanks for your reply.

        Dave

        Dave

        05/11/2009 at 12:24 am

      • Sorry, I lied. finally i tried it again. and it works, amazing. still dont know why it didnt work :) maybe it is my fault. :) anyway it works. Cheers

        Dave

        Dave

        05/11/2009 at 12:45 am

  11. Hi Matteo,

    first of all I wanted to thank you for this great menu-plugin! I tried many of them and i can say, that it is the best of all. I have a small question regarding the red field when you click onto the menu. Is it possible to change this color? I’ve looked everywhere, but unfortunately, I was unnable to find this piece of code. It would be great, if you could tell me where I can find it.

    Thx in advance,
    Patrick

    Patrick

    06/11/2009 at 7:12 pm

    Reply

    • Hi Patrick,
      you can find the answer here (jQueryExchange),
      bye,
      Matteo

      Matteo Bicocchi

      06/11/2009 at 9:45 pm

      Reply

  12. Hi,

    Is there a way to add menus at run time?

    Basicly what I want to do is, when the menu drops, there is an input box. User enters a url, and when the user hits a submit button on the same menu, the menu displays the new link.

    Togi

    Togi

    06/11/2009 at 11:13 pm

    Reply

    • Hi Togi,
      no, there’s no way at the moment to add a menuline on the fly; you can change on the fly any link to submenu or menu by replacing via js function the menu attribute of a certain line but not the content of an opened menu.

      I’ll get this as ISSUe for next release.
      Bye,
      Matteo

      Matteo Bicocchi

      07/11/2009 at 12:01 am

      Reply

    • Just additional info: I am using the latest version of mbmenu

      Togi

      13/11/2009 at 10:48 pm

      Reply

  13. Hi Matteo,

    Our page has a menu that is positioned all the way to the top right corner of the page, and the menu container opens when the user hovers over it. Time to time, when I hover over one and than hover to the next one, a section of the latter one displays outside of the page. This happens both in IE7 and Firefox 3.5. Have you seen this behaviour before? And any suggestions?

    Togi

    Togi

    13/11/2009 at 7:34 pm

    Reply

  14. I’ve just implemented MB Gallery for a photoblog with at least 150 thumbnails. Firefox on a Mac is taking a long time to load JQuery.

    Any help?

    Douglas

    15/11/2009 at 8:41 am

    Reply

    • Hi Douglas,
      I think that 150 thumbs is a big number… This kind of numbers should be managed somehow different…
      I’m working on getting it faster on load but I think that in your case Thumbs should be loaded with a paging system that I don’t have jet…
      Bye,
      Matteo

      Matteo Bicocchi

      16/11/2009 at 2:33 pm

      Reply

  15. Hi, do you have any suggestions on how to round the corner of menus in Internet Explorer using your menu system? Thanks.

    Bryan Davis

    18/11/2009 at 5:55 pm

    Reply

    • I Bryan,
      IE doesn’t support CSS border-radius property, so your issue could be solved working hardly on CSS… <my suggestion is to easly do that for all other browsers and let IE displays just what it can.
      Bye,
      Matteo

      Matteo Bicocchi

      18/11/2009 at 6:27 pm

      Reply

      • Hi,
        I haven’t implemented it, but I remember an IE-safe rounded corner solution a few years ago.
        It went like adding let’s say three or tags at the (top and) bottom of your container. The bottom would look like this:

        Should draw a rounded border at the bottom …

        Best regards,
        schmunk

        schmunk

        18/11/2009 at 8:00 pm

      • Sorry, the tags are gone …

        [p style="height: 1px; margin: 0 1px"][/p]
        [p style="height: 1px; margin: 0 2px"][/p]
        [p style="height: 1px; margin: 0 4px"][/p]

        for sure the p-tags should have the same bg-color like your container.

        schmunk

        18/11/2009 at 8:02 pm

  16. [...] jquery mb.menu [...]

    The Best jQuery Plugins of 2009 | Web Design Ledger

    04/12/2009 at 8:29 am

    Reply

  17. Hi Matteo,

    Great plugin, but I am trying to deal with a long list of menu items in one menu.

    Is it possible to get the list to us a scrollbar if it is to go outside the viewport?

    Peter Lane

    04/12/2009 at 1:11 pm

    Reply

    • Hi Peter,
      No, at the moment there’s no pagination methods for menu lines; I get it as future issue to implement.
      Thnx,
      Matteo

      Matteo Bicocchi

      04/12/2009 at 1:29 pm

      Reply

  18. [...] jquery mb.menu [...]

    The Best jQuery Plugins of 2009 | Graphic Design Pro

    04/12/2009 at 9:37 pm

    Reply

  19. [...] jquery mb.menu [...]

    The Best jQuery Plugins of 2009 | Programming Blog

    05/12/2009 at 10:17 am

    Reply

  20. [...] jquery mb.menu [...]

    Chamli Tennakoon :: Art Director | Graphic Designer | Web Designer | Branding | Corporate ID | Package Design | in Orange County » The Best jQuery Plugins of 2009

    06/12/2009 at 6:39 pm

    Reply

  21. The link on the jQuery project page to download version 2.7.2 links to changelog.txt instead of the javascript file!

    Tracy Dryden

    08/12/2009 at 8:38 pm

    Reply

  22. [...] 插件地址：http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/ [...]

    2009年最佳jQuery插件 | arthacker

    09/12/2009 at 6:31 pm

    Reply

  23. [...] jquery mb.menu [...]

    The Best jQuery Plugins of 2009 | meshdairy

    10/12/2009 at 5:37 pm

    Reply

  24. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 | Fatkun's Blog

    12/12/2009 at 11:03 am

    Reply

  25. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    推荐：2009 年度最佳 jQuery 插件 | what is the RIA? Java + Javascript + jQuery = 3J

    12/12/2009 at 12:44 pm

    Reply

  26. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    The roses blooming » Blog Archive » 2009 年度最佳 jQuery 插件

    12/12/2009 at 2:34 pm

    Reply

  27. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    2009 年度最佳 jQuery 插件 - 聚航工作室

    12/12/2009 at 3:10 pm

    Reply

  28. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 | Learning jQuery

    12/12/2009 at 3:54 pm

    Reply

  29. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 « 持家 治国 平天下

    12/12/2009 at 4:46 pm

    Reply

  30. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    2009 年度最佳 jQuery 插件 - 奇亚 Kiya's Blog

    12/12/2009 at 5:16 pm

    Reply

  31. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    JSSAY » 2009 年度最佳 jQuery 插件（转）

    13/12/2009 at 3:24 am

    Reply

  32. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    年度最佳 jQuery 插件 - 关注Web前端开发的技术博客

    13/12/2009 at 6:06 am

    Reply

  33. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    2009 年度最佳 jQuery 插件 « it is the Future !

    13/12/2009 at 11:03 am

    Reply

  34. [...] jquery mb.menu [...]

    Speed Os » 2009 年度最佳 jQuery 插件

    14/12/2009 at 2:43 am

    Reply

  35. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 « IInterest

    14/12/2009 at 2:54 am

    Reply

  36. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    2009 年度最佳 jQuery 插件 | 易贝

    14/12/2009 at 3:03 am

    Reply

  37. [...] need to create a more engaging nav, jQuery is your best bet. Here are a few of the best from ‘09.jquery mb.menuHorizontal Scroll Menu with jQuery This isn’t a plugin, but I had to include it since it is such a [...]

    The Best jQuery Plugins of 2009 | Warez Planet

    14/12/2009 at 3:09 am

    Reply

  38. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    2009 年度最佳 jQuery 插件 » 网页设计室

    14/12/2009 at 4:04 am

    Reply

  39. [...] jquery mb.menu [...]

    2009最好的jQuery Plugins[插件] « 狂奔的蜗牛和疯狂的兔子

    14/12/2009 at 5:14 am

    Reply

  40. Hi Matteo,
    Great menu. Just a quick question. For contextual menu, I can find the element that fires the menu. How can I find the element that fire the regular left click menu. I have about 200 thumbnails using the same menu and would like to detect the thumbnail that pops up the menu.
    Thanks.
    tom

    Tom Nygen

    14/12/2009 at 6:42 am

    Reply

  41. [...] jquery mb.menu [...]

    Ti'blog » 2009 年度最佳 jQuery 插件

    14/12/2009 at 6:58 am

    Reply

  42. [...] jquery mb.menu [...]

    2009年度最佳 jQuery 插件全揭秘 « 燕之庐网站建设

    14/12/2009 at 10:15 am

    Reply

  43. [...] need to create a more engaging nav, jQuery is your best bet. Here are a few of the best from ‘09.jquery mb.menuHorizontal Scroll Menu with jQuery This isn’t a plugin, but I had to include it since it is such a [...]

    The Best jQuery Plugins of 2009 | Software Country

    16/12/2009 at 2:46 am

    Reply

  44. [...] jquery mb.menu [...]

    The Best jQuery Plugins of 2009 | CQ-CSER

    16/12/2009 at 7:55 am

    Reply

  45. [...] jquery mb.menu [...]

    2009′un en iyi jquery uygulamaları | Blog GizliKale Güncel Linkler

    16/12/2009 at 11:19 am

    Reply

  46. Funciona mejor con el siguiente ajuste de display en css (display:block;):

    .menuContainer .selected td a{
    color:#000;
    text-shadow:#fff 2px 2px 1px;
    display:block;
    }

    Jose A. Martinez

    27/12/2009 at 9:06 am

    Reply

    • Thnx Jose, I’ll try your solution.

      Matteo Bicocchi

      27/12/2009 at 11:34 am

      Reply

  47. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 » 呐喊分享 » 呐喊网络部落格

    02/01/2010 at 10:50 am

    Reply

  48. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。 jquery mb.menu Horizontal Scroll Menu with jQuery AutoSprites 表单和表格 在 Web [...]

    ChaoRan » 2009 年度最佳 jQuery 插件

    03/01/2010 at 1:47 am

    Reply

  49. [...] 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。jquery mb.menuHorizontal Scroll Menu with jQueryAutoSprites表单和表格在 Web [...]

    2009年度最佳 jQuery 插件 » yybean.com

    03/01/2010 at 5:13 am

    Reply

  50. [...] jquery mb.menu [...]

    享受生活 » 2009年度最佳jQuery插件

    04/01/2010 at 4:57 am

    Reply

  51. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 | 高手网

    05/01/2010 at 6:39 am

    Reply

  52. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 « Scott McKnight's Blog

    05/01/2010 at 1:35 pm

    Reply

  53. [...] jquery mb.menu [...]

    熊仔阳光站 » 2009 年度最佳 jQuery 插件

    06/01/2010 at 2:15 pm

    Reply

  54. How does the ‘additionalData’ work – using the demo.html file, I have changed menuVoices.html to menuVoices.php, and can see menuId in the POST vars, but nothing else (As far as I can see, “pippo=1″ should also be there.

    Thanks

    Quentin

    07/01/2010 at 10:44 pm

    Reply

    • Duh – my mistake – pippo=1 is only defined for the horizontal menu, not the vertical one.

      Quentin

      07/01/2010 at 11:00 pm

      Reply

  55. [...] jquery mb.menu [...]

    2009 yılının En iyi Jquery Eklentileri » WordPress Hocası

    13/01/2010 at 10:13 am

    Reply

  56. Opera doesn’t seem to show custom content within the drop down? What am I doing wrong?

    Zero

    19/01/2010 at 3:16 pm

    Reply

    • Hi Zero,
      this is a known bug but not solved jet.
      Hope to find a solution soon.
      Bye,
      Matteo

      Matteo Bicocchi

      19/01/2010 at 7:22 pm

      Reply

  57. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 | 好好学习，天天向上

    20/01/2010 at 1:49 pm

    Reply

  58. Social comments and analytics for this post…

    This post was mentioned on Twitter by pupunzi: #jquery #mbmenu: published jquery.mb.menu 2.7.2 release with some bugfix: http://bit.ly/1zzNE2...

    uberVU - social comments

    24/01/2010 at 7:36 am

    Reply

  59. [...] eklentisiCoda-Slider 2.0Image GalleriesGalleriajQuery Panel GalleryslideViewerSupersizedNavigationjquery mb.menuHorizontal Scroll Menu with jQuery AutoSpritesForms and TablesPassword StrengthPassword Strength [...]

    2009 yılının En iyi Jquery Eklentileri | SITOZCAN.COM

    31/01/2010 at 7:57 pm

    Reply

  60. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 :: 2010、“新”的开始

    07/02/2010 at 3:56 pm

    Reply

  61. Hello,

    I’ve recentle updated from a 2.old version.
    I’m noticing that now, to go to a menu option I have to click right on top of any letter. Clicking anywhere else in that menu option does not send us to that option. This is quite anoying since diferent options have diferent text width, and we have to click right on top of that word… any sugestion?

    Joao Clerigo

    15/02/2010 at 4:21 pm

    Reply

  62. [...] jquery mb.menu is another very powerful component for easy creation of jQuery multilevel tree menu or context menu (right mouse button). [...]

    50 jQuery Tools for Awesome Websites | Programming Blog

    15/02/2010 at 7:09 pm

    Reply

  63. [...] jquery mb.menu is an additional really absolute member for easy origination of jQuery multilevel tree menu or context menu (right rodent button). [...]

    50 jQuery Tools for Awesome Websites » WordPressURLs

    15/02/2010 at 7:14 pm

    Reply

  64. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 « 悦宽网

    22/02/2010 at 2:59 pm

    Reply

  65. [...] jquery mb.menu [...]

    jquery特效 2009 汇集 | QK31

    23/02/2010 at 4:05 pm

    Reply

  66. Hi,

    I’m implementing the menus, but I have a framed layout and the menus are not being displayed over the frame, so the options are getting lost, how do I over come this issue?

    Regards,
    Vivek

    Vivek

    26/02/2010 at 10:55 am

    Reply

    • Hi Vivek,

      Frames are different pages in a DOM structure; that’s why you can’t have menus over them.
      You should use IFRAMEs to obtain what you are looking for; in this case the iframe is an element of the same page and a menu drown on the TOP window will overlay it.
      Bye,
      Matteo

      Matteo Bicocchi

      26/02/2010 at 1:32 pm

      Reply

      • @Matteo

        I tried to put it in a iFrame and it still does not work, do I have to change any piece of code. Here is what I’m trying to do…

        Dashboard

        Main Content

        Vivek

        26/02/2010 at 2:07 pm

      • [CODE]

        Main Content

        [/CODE]

        Vivek

        26/02/2010 at 2:09 pm

      • __
        __
        __
        __ Main Content
        __

        Vivek

        26/02/2010 at 2:10 pm

  67. [...] jquery mb.menu is another very powerful component for easy creation of jQuery multilevel tree menu or context menu (right mouse button). [...]

    50 jQuery Tools for Awesome Websites ­ Share My Live

    10/03/2010 at 6:48 am

    Reply

  68. [...] jquery mb.menu [...]

    2009 年度最佳 jQuery 插件 | Programer Life

    10/03/2010 at 4:56 pm

    Reply

  69. [...] jquery mb.menu is another very powerful component for easy creation of jQuery multilevel tree menu or context menu (right mouse button). [...]

    50 jQuery Tools for Awesome Websites « Web Development News

    11/03/2010 at 2:04 pm

    Reply

  70. [...] jquery mb.menu is another very powerful component for easy creation of jQuery multilevel tree menu or context menu (right mouse button). [...]

    50 jQuery Tools for Awesome Websites | Web Development News

    11/03/2010 at 4:56 pm

    Reply

  71. There is NO LINK TO DOWNLOAD THE FILES. I repeat, even on the jQuery project page there is no way to download 2.7.2. The Download link on the jquery project page links to the README file, not to the zip package. The only way I could get it was to download the example, which has all kinds of other stuff I don’t need. Please fix. Thank you.

    Matt

    11/03/2010 at 9:41 pm

    Reply

    • Hi Matt,
      the link is working perfectly and you can find it on the mb.menu page on this blog:
      http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/.

      anyway here is the direct link: http://mbideasproject.googlecode.com/files/jquery.mb.menu.2.7.2b.zip

      Bye,
      Matteo

      Matteo Bicocchi

      12/03/2010 at 9:04 am

      Reply

    • Hmmm, works for me, just used this link …

      download example:
      http://mbideasproject.googlecode.com/files/jquery.mb.menu.2.7.2b.zip

      Proof :) http://img696.yfrog.com/i/bild1sv.png/

      schmunk

      12/03/2010 at 9:05 am

      Reply

  72. Hi schmunk,
    it should work also with XHTML declaration…

    Matteo Bicocchi

    05/10/2009 at 8:14 pm

    Reply

  73. Thanks, my fault.

    Another issue: I can not open links in new tabs by just cmd-click.
    Only right-click “Open in new tab …” works. On OSX 10.5, Safari 4 and FF 3.5

    schmunk

    11/10/2009 at 1:19 am

    Reply

  74. Hi Schmunk,
    This is due to the fact that all the links, even the a href one, are managed as on click event script, loosing the href attribute. that’s why the cmd key doesn’t work.
    That could be considered a bug; I’ll fix it for next release.
    Bye,
    Matteo

    Matteo Bicocchi

    11/10/2009 at 1:13 pm

    Reply

  75. That would be very nice! Btw: Do you have a “Donate”-Button?

    schmunk

    11/10/2009 at 1:34 pm

    Reply

  76. Did you take a look at mine mb.scrollable component? it works almost as the sliding one…

    jquery.mb.scrollable

    Bye,
    Matteo

    Matteo Bicocchi

    05/11/2009 at 12:30 am

    Reply

  77. Hi Schmunk,
    There are several ways to obtain round corners in IE; the problem is that doing it on the jquery.mb.menu component would hardly complicate the menu constructor introducing too many elements in the DOM and slowing down the events. The simplest way is the one adopted by all the other browsers, doing it via CSS!
    If I have just a container drawn statically on the page than I can accept works aroud, but not on complex dynamically drown javascript objects.
    Bye,
    Matteo

    Matteo Bicocchi

    18/11/2009 at 8:28 pm

    Reply

  78. Hi Vivek,
    Unfortunately your code has not been printed in your posts;
    Maybe I wasn’t clear:

    On a frame set page each frame is a stand alone page and it’s not possible to show elements invoked from a frame over the top of another frame.
    The only solution is to have a main page where you build your menu and a set of iframes where you have your content. In this whay the menu can stay over the iframes because all the elements are owned by the same page.
    Hope this can clarify beter; it’s just HTML basic concept…
    Bye,
    Matteo

    Matteo Bicocchi

    26/02/2010 at 6:21 pm

    Reply

  79. Hi Matteo,

    But if I design the pages like that, then on each page I would have to add the iFrame.

    I’m actually using it on a Struts project and since I would be changing only the body, it would be a more code :( .

    Any other suggestions?

    Cheers,
    Vivek

    Vivek

    27/02/2010 at 7:46 am

    Reply

Leave a Reply