jquery mb.menu
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.
v. 2.8.5
What’s new in 2.8.5:
- Added a new “boxmenu” modality to display any html into the menu.
- Added “disabled” property to root menu; if setted to true all the voices are disabled.
- fixed a bug that prevent any submenu to show and hide properly if an “empty” root manu was defined.
- improved graphic
Hi, I like the look of your jquery tree menu and am looking for a new solution for my sites.
However your demo does not appear to work in IE7 or Firefox, please can you send me the latest working demo link?
Thanks, james
Hi James,
I don’t know what’s going wrong for you but the component is working fine in IE7/8, FF, Chrome, Safari, Opera … And it has been tested by thousand of users…
let me know,
Matteo
It also does not work for me in IE7. I get 2 JS errors:
Line 10 get(…).adj is null or not an object
Line 414 ‘undefined’ is null or not an object
I skip over both of them and end up with a page with a background image and nothing else.
Hi Rene,
Are you sure those errors are from the mb.menu component?
There’s no .adj() method on my script…
Bye,
Matteo
Hi Matteo, sorry it was my error, just assumes they were on mouse over, not onclick! Sorted, thanks, James
Hi Matteo,
awesome work!
Can I have images also in “rootVoice” items?
kambiz
Hi Kambiz,
you can manage rootvoices as you want as you would normally do.
Bye
Matteo
怎么学习这些？
Hi Matteo.
Great work on this plug-in. I am trying to use mbMenu for the top nav bar on my site but I am getting errors in IE8. I am using the following JQuery scrips:
The menu works fine for me in FF and Chrome, but in IE I keep getting the following Javascript error:
The error is at line 113 in jquery-1.4.2.min.js.
Another problem I have is that the boxmenu I am using disappears onMouseout from the rootVoice in IE, but stays visible just fine in FF and Chrome. I can provide the CSS and HTML if needed.
Any help you can provide would be greatly appreciated.
Hi Ben,
answered on http://jquery.pupunzi.com/questions/403/ie-issue-with-jquery-1-4-2-and-mbmenu.
Bye,
Matteo
Perfect work Matteo. Love it. So easy for manage and with great opportunities.
Please can help my with this issue:
When sub menu is opens at the right side and there is no place for it, it’s opens to the left, but when text is longer it extends over root menu. Is there any way to avoid this.
Hi Matteo,
there is a ‘*’ selector in the mb_bringToFront,
since the ‘zIndex’ is almost an issue I replaced the code(see below) and
it becomes a lot faster in huge content pages.
mb_bringToFront: function(){
var zi=10;
$(‘div’).each(function() {
if($(this).css(“position”)==”absolute” || $(this).css(“position”)==”fixed” ){
var cur = parseInt($(this).css(‘zIndex’));
if(cur > zi){
zi += cur;
}
}
});
$(this).css(‘zIndex’,zi);
}
bye
kambiz
Hi Kambix,
your solution is surely faster and lighter, but zindex could be applied even to other HTML elements; the mb_bringtofront function accept also a parameter to define which element should be influenced and this would enlight the recursion in the dom.
Bye,
Matteo
“parseInt” is under FireFox also expensive and not all “div” tags have set “zIndex”,
so an enhanced fix would be:
mb_bringToFront: function(){
var zi=10;
$(‘div’).each(function() {
if($(this).css(“position”)==”absolute” || $(this).css(“position”)==”fixed” ){
var zIndex = $(this).css(‘zIndex’);
if(zIndex){
var cur = parseInt(zIndex);
if(cur > zi){
zi += cur;
}
}
}
});
$(this).css(‘zIndex’,zi);
}
Hi,
This is a very good Job.
Maybe the best way is using “List Tag” as Table.
It’s very easy to make and better for the design.
Tchouss, from France.
Hi Matteo,
I am trying out mbMenu (2.8.5) to use on a number of web sites that I maintain. It looks quite nice but I have some questions:
1. Is there a way to trigger a context menu by doing a double click? Since Opera does not allow right click, I would like to have the same menu triggered by a double click so that Opera users can use them.
2. How can I keep the container from printing when I print the page? Most of our pages have a Print option as one of the context menu selections. There are other items on the page that I hide (via css) when printing. When I use the window.print() from the menu, the context menu shows up on the print.
3. I am not using the metadata plugin. Everything works except “disable”. How do I let mbMenu know that the menu item is disabled if I am not using the metadata plugin? I have tried specifying “disable”. The menu item shows normal and still functions in Firefox; in IE the text looks disabled but I can still click on it and it functions.
4. Is there a way to indicate that a particular menu item (or the title) does not have an image? I have been using a completely transparent image so that there is no box in IE.
Larry Carrington
Hi Larry,
1. You have to change the mbmenu.js at line: 180 adding:
var evt= $.browser.opera?"dblclick":"contextmenu";just before:
$(cm).bind("contextmenu","mousedown",function(event){and replace “contextmenu” with evt:
$(cm).bind(evt,"mousedown",function(event){2. you can set a css for @media print hiding the .menuContainer elements:
.menuContainer{display:none}3. the attribute you have to define is:
isDisable4. just remove the img attribute from the a tag.
Bye,
Matteo
Hi Matteo,
Thank you fro the quick response.
1. Your suggestion worked great for the right click/double click. I then took it further and bound the event function to both the double click and right click for all browsers–some of our old pages used double click so now users can now do either. I also downloaded the latest Opera (10.60). And Opera now supports right click!
2. I already had:
@media print {
.menuContainer {display: none;}
}
The menu does not print when I do a ctrl+P. But when I do a window.print() as the action in the menu, it does print. It seems that while the menu is being displayed, it will print. I was thinking that I could try having the menu item call a function; in the function I could close the menu and then do the print. But I don’t know how to close the menu from another function. I hope that I can solve this because I would really like to switch to mbMenu but the Print menu item is critical to us.
3. Adding isDisable=1 worked great.
4. Removing the img from the tag did not work. I still get a box displayed in IE 7 and IE 8. It works fine in other browsers. I will just use my blank image.
Larry
for the #4 if you don’t specify any image it’ll look for a “blank.gif” image in the same folder of other icons.
Yes, you can call a function that closes the menu and than print your page:
function closeAndPrint(){$.fn.removeMbMenu($.mbMenu.options.actualMenuOpener);
window.print();
}
Bye,
Matteo
Excellent!
Hi Matteo!!!
Is it possible 2 or more columns options?
Depending on the quantity of options (20 or more), the last one’s goes out of screen. If there was a parameter for the maximum lines, they could be placed in columns.
After some tests, I could see the menu position automatically changes, moving it up to try to fit in the screen. It is a great enhancement.
Also, I’ve tried smaller font sizes. But it was not enough.
Thanks
Marcos
I tried to hack Matteo’s code, but I don’t know javascript that much.
Could you anybody help?
Hi Matteo,
thank you for your wonderful menu.
I got two topics i want to ask for:
a)
I am using your menu for a list of up to 50 elements. Firefox, Chrome and other browsers can handle this in less than a second except for IE 7 (needs up to 10 seconds to parse). Each menu has only one menu level (no sub menus) and less than 10 entries.
Are there any chances that the IE can handle your menu structure in a time less than a second?
b)
I load a menu via your Ajax functionality which works fine. The application needs to do some things before sending the generated menu so it takes around 5 seconds for the asynchronous server round trip. Is there a way to show a “please wait” div or something else while waiting for the ajax response in addition to block the mouse pointer click ability? I tried to register call back functions in the jquery-ajax system but they didn’t fire when your menu makes the ajax call.
Thanx for your help
Hi Ragnus,
A) IE has several problems on rendering pages and I don’t have a solution yet for your problem… I can suggest you to orgaize your menus to have less voices per menu…
B) I’ve never had such problems on the uses I have. It loads menus in some milliseconds, not seconds… However a generic .ajaxStart() and .ajaxComplete() should work for you: http://api.jquery.com/category/ajax/
Bye,
Matteo
Hi Matteo,
thanks for your hints.
Can you announce a date when your menu plugin will be avaiable for jquery 1.4.x? Because I use the jquery modal dialog I have to use that jquery version. But with jquery 1.4.x only with firefox the show animations of any pre-ajax send event will be executed. IE and Chrome never show the dialog pop up.
Hi Ragnus,
the black dialog pop up is used just as debug; not thought for production… anyway it works fine on FF, Safari, Chrome and Opera also with jQuery 1.4.x for me…
which version of the mb.menu are you using?
You can try this prerelease: https://github.com/pupunzi/jquery.mb.menu/tree/2.8.5rc9 but I don’t think this solves your problem.
Bye,
Matteo
Hello.
It supports me Rtl?
No, I’m sorry…
Hi Matteo,
I have run into a problem using mbMenu. When I use mbMenu (context menu) on a page, I can no longer select text, clear contents of a text box, etc. with the mouse. I took out my changes for double click (I just downloaded the original again) to see if that was the problem. It was not. Have you seen this problem before? Do you have any idea what might be causing this?
I am using jQuery 1.4.2 (I also tried it with 1.3.2) and mbMenu 2.8.5.
My menus typically are defined like this:
$(document).buildContextualMenu({adjustLeft: 0,
adjustTop: 0,
closeOnMouseOut: true,
fadeInTime: 100,
fadeOutTime: 100,
hasImages: true,
hoverIntent: 0,
iconPath: ‘../images/’,
menuSelector: ‘.ContextMenu’,
menuWidth: 100,
onContextualMenu: function (o, e) {},
opacity: .85,
overflow: 2,
shadow: true,
submenuHoverIntent: 0,
template: ‘../common/PageMenu.htm’});
Larry Carrington
Hi Larry,
never had this problem before…
Do you have a public URL where to see it?
Bye,
Matteo
Hi Matteo,
Yes, go to http://www.dchoa.org. If you right click, you will get the page menu. You cannot select text on the page with the mouse.
Larry
Hi Larry,
this happens because mb.menu component set to unselectable the element where the contextualmenu is applied to prevent selections when the menu is invoked.
In the truth I did never tried it on the body of a page… I’ll see to solve this issue for next release.
for the moment you can comment line 177 of the script:
$(this).css({"-webkit-user-select":"none","-moz-user-select":"none"});and see if it works.Bye,
Matteo
Matteo,
Love your stuff. We had an exhaustive search for a good jQuery menu, and we’ve settled on yours. I have 2 issues I’m working on, and I was hoping you could provide some guidance.
1. We have the menu set to open onclick. Currently, it opens pretty slowly, even with not many items in the menu. With 5-6 items in the menu, it takes a solid second to open the menu, maybe even 2 seconds. I’m concerned when we have many items in the menu (we will in some cases) it will take “too long” to open. I have the delay set to 0 and the hoverIntent turned off. Is it loading the menu content dynamically? If so, is there a way we can turn that off? We build all the menus dynamically on the server-side, so we don’t need it to be dynamic, we just want it to be fast.
2. My second issue is that I want to have multiple “different” instances of the menu on one page. We are using it as our main navigation menu at the top, which is styled in one way. I also want to use it in the body of the page as user-select dropdown, but styled differently. This mostly works except for the “rootVoice.selected” class – this seems to control the “hover” and “on” attributes of the menu. Is there an easy way to have 2 different instances with 2 different .rootVoice.selected classes?
Let me know if you need me to explain it further.
-Mike
Hi Mike,
1. usually that happens on IE if you have a complex page (many tables and so on). I’m working on a new lighter version of the menu that actually build tables to construct the menu voices.
2. Actually there’s no way to have different styles for different instances of the menu in the page; I’ll see to implement it for next release.
Bye,
Matteo
Matteo,
Thanks. Also:
1. I noticed this in Firefox, not IE. The page is somewhat complex but it is almost entirely DIVs, not not tables. Since we’re in the early stages of development on this application, I expect them to get much more complex.
2. Hmmm, this is going to be troublesome. I can actually get around almost everything else using CSS, but unfortunately, because of the way you use that rootVoice.selected class, I can’t create different “on” or “hover” states for the different instances of the menu on our page. I guess I’ll see if I can come up with a temporary “hack” fix for it.
Thanks,
Mike
Mike,
1. Does this happens also in the demo file provided in the package?
We use the menu in several heavy apps without your problems… do you have a public URl where to test it?
2. for the root voices you can work around by adding a custom class to the voice container and manage the apparence via CSS:
actually in the default css:
.rootVoices td.rootVoice.selected{...}you could have:
.rootVoices td.rootVoice.custom.selected{...}and on the TAG:
class="rootVoice custom {menu: 'box_menu'}"Bye,
Matteo
Matteo,
This is in development, so I don’t have a public URL for you to see, nor will we any time soon. I’ll check the demo file that came with it and see if it does the same thing.
As for the CSS, this shows you learning something new everyday – I knew I could do this: class=”rootVoice custom {menu: ‘box_menu’}” but I did not know I could address it like this: .rootVoices td.rootVoice.custom.selected{…}. I think that will actually solve my issue – THANKS!
Mike
Hi ,
I’ve been trying the mbMenu v2.8.5 Demo at http://pupunzi.com/#mb.components/mb._menu/menu.html
using Google Chrome 5.0.375.99 (on linux), but it doesn’t seem to work; actually, when I click on “Demo”, it doesn’t show nothing but the background image.
I also tried to use it in my local Apache web server ; it works fine with IE, Firefox, Opera, but it does not for Chrome.
Hi,
I’ve not tested it on linux and I don’t know if Crome works the same as on the other OS, so I can’t really help you.
Chrome does’t allow ajax calls from a local file but it should work fine on a web server…
Let me know if you find a solution,
Bye,
Matteo
Great job. But I have a question.
I’m using the AJAX template. The menu content changes based on the current server-side state of the item being clicked. How can I delete the menu upon close so that a fresh instance will be pulled from the server on the next menu opening?
Thanks
Hi Bill,
If you need just a specific menu to be reloaded than you have to remove it from the dom when you need to evaluate it again serverside; if you whant ajax menus to be always recalled from the server than you can add a general property as “ajaxAlwaysReload” and change the code from line 226:
if (!$("#"+m).html() || op.ajaxAlwaysReload){
$("#"+m).remove();
$.ajax({
type: "POST",
url: op.options.template,
cache: false,
async: false,
data:"menuId="+m+(op.options.additionalData!=""?"&"+op.options.additionalData:""),
success: function(html){
$("body").append(html);
$("#"+m).hide();
}
});
}
This will alwais recall the menu from the server.
Bye,
matteo
Hello!
First, Thanks for this great Script!
I have a Login Panel in my mb_menu, in my normal panel when i double click the input username text i get a history of my usernames, but in mb_menu i get nothing, when i double click nothing happens.
Could you please tell me how can i fix this ?
Hey there!
Has anyone had any success adding mbTabset (Or JqueryUI tabs) to the mbMenu?
Thanks!
Hi Jason,
Do you mean have tabset inside the menu?
The mb.menu is thought to be a menu, not a container for other components, I’m sorry but you can’t.
Bye,
Matteo
Hey nice menu,
could you tell me how you call up the ajax menu? i have searched in the code but i did not find it. Also in my demo it does not work.
Could you give me an advise?
Thanks
Hi Mark,
the mb.menu search its content in the DOM of the page, however, if the corresponding ID is not on the page, the component makes an ajax call to the URL passed as “template” in the initilization function passing the ID of the menu as “menuId” parameter in the querystring. This let you define a dinamic page (php, jsp, asp, etc.) that builds the voices on demand and returns them as ajax content. If you see at my demo files you can find the “menuVoices.html” one where you can see the HTML structure the dynamic page should return.
If you are running the demo locally it doesn’t work on Chrome; if you are running it on your server but it doesn’t work than it means your server doesn’t allow POST requests and you have to change the ajax call methods at line 268 of the mbMenu.js file from POST to GET.
Bye,
Matteo
hey nice component ive used it in a page at work but doesnt display well in IE the error is offset.top() is null, in FF it displas well but launches a js exeption
Error: $(“#” + n.options.containment).offset() is null
Archivo de origen: http://localhost/js/mbMenu.min.js
ive fixed the problem locating the menu header in a div tag but it displays from down to top beacuse the div is to small and i cant make it bigger. i ve been a week on this mater if you cant leave me a reply will be usefull
thanks in advance
Vasily
Hi Vasily,
which version of mbMenu are you using?
Actually I don’t include the minified file anymore… so it should be an old version of mb.menu, try download the latest at: https://github.com/downloads/pupunzi/jquery.mb.menu/jquery.mb.menu.2.8.5.zip.
Bye,
matteo
Hi Matteo,
I am using the latest code 2.8.5 and when I run my menu in your demo page it works fine, but when I run it in my local server I get the $(“#” + op.options.containment).offset() is null problem
$(“#” + op.options.containment).offset() is null
mbMenu.js Line 489
Any ideas what I could be doing wrong
how did you initialize the menu?
this error could happen if you specify a containment that doesn’t exist in your page DOM.
By default the “containment property is set to “window”, but if you want your menu working inside any element of your page than you can change it passing the ID of the element. In your case this property is set to an ID of an unexisting element.
Bye,
Matteo
Hi Vasily,
Solution:
var wh = (op.options.containment == “window”) ? $(window).height() : document.body.scrollTop + document.body.clientHeight;
var ww = (op.options.containment == “window”) ? $(window).width() : document.body.scrollLeft + document.body.clientWidth;
Greetings
would it be possible to have the first dropdown level horizontal but the second level be vertical?
example here: http://www.taepark.com/images/menu.gif
Hi Tae,
You can’t have this behavior with the mb.menu component, but you can create the top horizontal one by yourself and attach the menu to the sublevel voices.
Bye,
Matteo
Hi, I was wondering if there is a way to use , , instead of in the constructor for the HTML header.
thansk.
Ps.:I’m from Brazil and my english is not very good, so I apologize for any mistake
Mateo greetings. how I can enable or disable the options in a menu with jquery code to be dynamic.
need to do this
Paciente
but with JQUERY
sorry English is not very well
I like everything you have done; but this page housing everything is soooo slow – infact, Safari just crashed. Firefox holds up, but went sluggish. I would highly recommend you look at improving performance of your pages here.
How about having an mouseover() –activated #info-div inside the menu, that displays info of the menu item under mouse cursor? I can add ID to menuitem but menu does not “refresh” until it is closed and then opened again. Only after re-opening the contents of info-div is changed. How do I “refresh” the menu after mouseover()? To test u can use mouseenter(), close and open the menu again to see changes…
…(‘#info-div’).text( “mouse is over menuitem now! ” );
Hi Jarkko,
The displayed menu is just a clone of the one defined in the DOM of your page.
If you need to refer to an element inside the menu you should add the “mb_” prefix to the menu ID you are referring to; otherwise you’ll change the content of the hidden menu.
For example: if you have a menu with ID “menu_12″ containing your div with ID “info-div”, you can change the content of “info-div” of the displaied menu in that way: $(“#mb_menu_12 #info-div”).text(“… your text …”);
Bye,
Matteo
Thank you for quick answer. I can correctly point to element on the menu, but menu is not “refreshed” on mouse action, page content on the other hand is changed on action. See this video that shows my problem.. http://www.jarkonkotisivu.org/temp/mb_menu1.flv
As I can see from the video you are pointing to the DOM element instead of the shown menu itself;
instead of
$("#menu_3 #slide1").text("...My text...");you should write:
$("#mb_menu_3 #slide1").text("...My text...");This way you refer to the cloned element that is shown in the page.
Bye,
Matteo
Oh, right! It works smoothly, thank you for this awesome menu!
Ciao Matteo
Ti volevo avvisare che sto per fare un nuovo modulo per prestashop cms per integrarci il tuo menu e sarei ben felice se in caso di problemi (ma non credo che ce ne saranno) ti possa contattare anche con la tua email (per fare prima). Abito anche vicino a Firenze.
(ovviamente farò anche un pò di pubblicità nel forum) (forse se avrò un pò di tempo libero lo farò anche per altri cms)
Ciaooo
Ciao,
non conosco Prestashop, comunque mi fa molto piacere che tu abbia implementato il mio componente. Nel caso tu abbia problemi scrivimi pure.
Ciao,
Matteo
Hi Matteo,
Great component – thanks for the effort.
Just a quick question. Is there a way to refresh the menu dynamically once a user has made a selection. I.e. retrieve additional menu items when a user is logged on?
Thanks
I just sent you an email about the question below. I didn’t realize there is a comment at the bottom of the page. So I’ll just re-post the question.
Good day Matteo, thanks for such an excellent menu. I’ve been playing with it for the last few days. I have gone through all files and they make sense to me. But I do have a question about how to call AJAX from submenu.
I know how to call Ajax from the top menu. If the menu id doesn’t exist on the page, the script will use Ajax to fetch menu data from the server by template and additionalData parameter. The top menu code is shown below.
…
ajax menu
$(function(){
$(“.vertMenu”).buildMenu(
{
template: “http://www.myserver.com/templates”,
additionalData: “templateID=1″
});
})
…
———————————————————————————–
Ajax_menu_12.4
The code above is the submenu returned by the server through AJAX. My question
is here. On this submenu, the submenu id is “menu_12.4″ which doesn’t exist on
the page. So it should go to server to get the sub-submenu. But how can I pass
the menuID (“menu_12.4″) to the server? As far as I understand, it still uses
the same templates http://www.myserver.com/templates?templateID=1 to fetch the
sub-submenu.
Any help would be greatly appreciated,
Michael
Hi Matteo,
There is any way to make the menu html 4.01 strict compatible?
Thank you.
Hi,
How can I make a Home button at the root level?
Thanks!
Hi Pablo,
If you take a look at the demo.html code you can see that the last voice doesn’t open a submenu but fires directly an action; using the same sintax you can point to a different URL.
Here is the code:
The last td has the attribute menu set as empty and an onclick event that points to a different URL
<table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr> <td class="rootVoice {menu: 'box_menu'}">box menu</td> <td class="rootVoice {menu: 'menu_12'}">ajax menu</td> <td class="rootVoice {menu: 'menu_2'}">menu 1</td> <td class="rootVoice {menu: 'menu_2', disabled:true}">menu disabled</td> <td class="rootVoice {menu: 'menu_3'}">menu 2</td> <td class="rootVoice {menu: 'empty'}" onclick="self.location.href='http://pupunzi.com'">empty menu</td> </tr></table>Hope this can help you,
Bye,
Matteo
Dear Matteo,
First – your work is amazing. It seems like you have spent a lot of time and thought on your plugins! Waaoo!! & Thanks for sharing this code with us!
Second, I have a question: I want to use your menu in one of my project, but before that I want to make sure that it support showing a drop down menu that will open to the left. In fact, as part of the design I need:
* One menu that opens down and its sub menus open to the left.
* On the same control, one menu that opens down and its sub menus open to the *** right ***.
Is that doable?
Thanks
Nadav
Hey Matteo. Thank you for doing such an amazing work. I have a question. If I want to use mbmenu in my website, and to publish it, does “mb.ideas.repository” (a link) must be on the top of the page or I could delete it?
If it must to be there, does it have to be on the top, and does it have to be on each page?
Thank you. The job you do is incredible.
Hi John,
Of course not
You can remove the top link you find in the demo. Just leave the copyright into the javascript file, that’s all.
Bye,
Matteo
Thank you so much.Wish You the best luck on the following projects. Amazing job.
Regards,
John
Fantastic menu! I have a question though… I would like to have the very first level/root/parent for the VERTICLE menus that have sub categories to have the image arrow. For example:
———————————————-
First Level/Root/Parent Menu 1 > | (has subcats)
First Level/Root/Parent Menu 1 | (does NOT have subcats)
First Level/Root/Parent Menu 1 > | (has subcats)
———————————————-
No idea why my date says 4/6/2011 as I posted this on 6/4/2011. hmm….
This is the italian date format
Hi Steve,
You should do it via CSS adding a specific class to the root menu that have submenu where you can specify a background arrow image.
Bye,
Matteo
If you move slowly across from one menu to another (the VERTICLE) menus, it closes itself and it should not.
Also… are the submenus containers not liquid? Meaning they would take the length of the longest submenu? Right now, I have some long submenu names and they are longer than the menu box. They dynamically change so this may or may not be the longest one we have so we need the menu container to be liquid.
It appears to be doing it (closing itself when I am hovering over a menu) more and more. It’s random but it’s frequent. You can see it here:
http://www.collectionstation.com/categories/Toys/2-Action-Figures/view:detail
(the left-side verticle menu)
Hi,
Try to set the hoverintent property to 0; this should be the cause of your problem.
I’ll take a look at the code to see how to solve it.
Bye,
Matteo
any update to the liquid issue above?
matursuwon,mister
tank’s you
this is so cool! thx very much!!
Hi, at this moment im using some other plugins that i changed code with XML, it gave me a flash file at the end, which i just posted and worked great, but at the moment of going to an ipad it just wont work, a friend told me that i needed to start using javascript plugins… will this menu work as javascript or flash?.. what do you recommend?
Hi Rolando,
This component is a javascript component; try it to discover if it is what you need.
Bye,
Matteo
when you write “voice”….do you mean “choice”???
Hi,
great component!
I wanted to prevent the closing of the menu on external click. How can it be done?
Nice ..
Now, my menu in footer so i want to show on top. can possible?? if can, how can i do it?
Hi koko,
This menu has no option for bottom to top display; it checks automatically if the opening menu fits the actual screen size and it tries to get the right position if not. This, anyway is different from what you are asking for and actually there’s not a real solution.
Bye,
matteo
Izzit the menu also available for ASP.Net MVC 3 framework???
Hi Chris,
This is a javascript plugin you can implement on any framework; i don’t know if there’s any ASP.net implementation yet.
Bye,
matteo
Wow;;;;
OH….
Hi Mateo,
I contacted you on 02/09/2010 about an issue with not being able to select text when the context menu was added to the entire document. On 08/09/201 you indicated that this was due to making the element unselectable. You said that you would look at changing this in a future release. Has this been addressed? I would really like to switch to your menu system but have to be able to select text, clear text in text boxes, etc.
Thank you.
Larry Carrington
ciao matteo complimenti per il tuo lavoro sono davero fantastici, ho un problemuccio sto cercado di inserie il menu in un mio progetto asp.net mvc3:
1) il menu ajax non me lo carica;
2) quando vado su un menu e sia pre il sotto menu si vedono delle linee bianche tra una voce ed un altra e non si vedono le freccie per accedere ai sotto menu
Ciao Bruno,
Se le chiamate ajax non ti funzionano potrebbe essere o che il tuo webserver non accetti richieste POST oppure che il path del file che stai chiamando non è corretto; se hai una console guarda che tipo di errore stà dando.
Comunque, se il problema è il POST devi semplicemente modificare le chiamate ajax nel javascript da POST a GET.
Per il problema di visualizzazione, anche questo sembrerebbe un problema di path delle immagini…
Ciao,
Matteo
Very great menu! Thank you!
Hi Matteo.
I’m a portuguese student doing an internship in spain and the enterprise asked me to make a menu. So a friend of mine recommend me your awesome jquery menu.
I’ve already done it, but I have two bugs (or its just my fault that I don’t know how to fix it):
- The menu opens always to the right side. Even if it doesn’t have space on the screen. Is there any way that if there’s no space on the screen to open the menu to the right, it opens to the left?
- The width of the “cells” is static. Is there any possibility of make it adjust automaticly to the content?
I just need this to finish my menu and I’m going mad trying without success… Could you tell me how to fix this?
Many thanks and best regards,
Fancisco
PS: I’m using the last v. 2.8.5
Hi Francisco,
Both those behaviours should already be inplemented in the current menu release.
Is there a public page I can access to see what’s going on?
What browser are using to test the component?
Bye,
Matteo
Hi Matteo,
I’de to fly back home due to some problems.
I’ll try find some place were I could host it and send you the link.
I’m testing in Firefox 8.0 and Chrome 15.0.x.
Another thing that I need, is: when I have just for example 3 or 4 menus, instead of it use all the area, just use for half or less of the menu lenght (to avoid the dispersion with so few options).
Thank you!!
Francisco
Hi Matteo,
Ok, so I’ve put it here:
http://si.uma.pt/capelo/genera_menu.php?tipo=iconos&padre=0
The things that I need to change/correct is:
- Menu opens always to the right side, even if it doesn’t fit;
- When I put a low value on the cells it adjust automaticly the width. But the text overlaps the “arrow”;
- When I have few “main menus” (like 2 ~ 4) is possible to do not use all the horizontal space? (cus it distribute automatically, using all the space). When it has few options, I just wanted it near each other, on the right. Is it possible to do?
Thanks for all the support!
Francisco
Hi Francisco,
- Menu opens always to the right side, even if it doesn’t fit;
If you test the demo files this is the behaviour that the menu has; probably you should see how you are writing your HTML page… It doesn’t have HTML, HEAD and BODY tags…
- When I put a low value on the cells it adjust automaticly the width. But the text overlaps the “arrow”;
you can adjust this via CSS changing the padding of the single menu voices: .menuContainer td.voice
- When I have few “main menus” (like 2 ~ 4) is possible to do not use all the horizontal space? (cus it distribute automatically, using all the space). When it has few options, I just wanted it near each other, on the right. Is it possible to do?
you can adjust this via CSS too; just change the width of the table that contains the root voices
Hope this can help you,
Bye,
matteo
Thanks Matteo!
About the tags, do you really think that it could affect the behavior?? This morning I’ll try it all.
Again, many thanks by the support!!
Hi Matteo,
With your help, I was able to do all the things, less the menu opening to the left side. I’ve put the tags, and try to analyze your demo, but I just don’t know why, it always open to the right side…
I’ve also some strange bug (just noticeable when I’ve the Firebug on):
$(“#” + op.options.containment).offset() is null
mbMenu.js (line 489).
But the menu works without any problem.
Could you please point me something else that could be blocking the correct menu opening side?
Thank you so much,
Francisco
Hi,
The error you are getting is the cause of the always right side menu.
What do you set as containment in the initialize function?
Bye,
matteo
Hi Matteo,
I’m not sure of what you’ve asked, so I’ve put the file here:
http://dl.dropbox.com/u/2770846/genera_menu.php
I’m just going mad with this thing of the opening to the right. I’m really very pleased with your help!
Thanks again!!
Francisco
Hi Francisco,
By default the containment of the menu should be “window”; in your initialization function you set a DOM element with ID “wrapper” as containment of the menu(
containment:"wrapper",), but this element doesn’t exist on your page (probably you cut & paste the code from the demo1.html file where the menu is constrained inside a wrapper).To solve this just remove the containment:”wrapper” parameter from the
$(".myMenu").buildMenu({...})call in your page and everything should work.Bye,
Matteo
PERFECT!!!
IT WORKED!!!
Thank you Matteo. I’ve never expecet so much support! Neither so quickly.
), and my boss is also very pleased.
I’m really happy with the result (I’ve just to change the colors
Again, thank you by the aewsome library and by the amazing support!
Best,
Francisco
Hi,
I’d like to now if it is possible to configure the menu so that the header menu is also a link meanwhile conserving the dorpdown effect once it’s been clicked …
I try to be a bit cleare … I have Menu a / Menu B / Menu C and Sub menus …
When you click Menu A it activates a dropdown … I would also like to have this Menu A linking to somewhere as well as activating the dropdown….but if I put a link to it, the dropdown does not activate anymore … many thanks for any guidance
Hi,
But if you have a link on the top voice that point to another page that means that once you click that link you’ll change the page… and the menu is on the page you are leaving… How can it works that way?
Sorry but maybe I missed something.
Bye,
Matteo
Has anybody written a PHP wrapper/library around this?
Hello,
Great component. I was able to get it installed, designed and using dynamic menu items in less than an hour.
I do have one question; On a menu item without a drop down, how do you make it link to another page?
take care,
lee
Hey Matteo,
Really nice menu system – have used in a couple of projects and works really well.
My question is there any way to trigger a menu voice from outside the menu….eg. I have an advert on my page outside the menu, but when it is clicked the boxMenu voice in the menu is triggered….
Thanks,
Glen
Hi Glen,
If the menu is closed the element does not exist in the page; so you can’t trigger any event.
Bye,
Matteo
Hi Matteo, can you please advise how to open a context menu when user right-clicks anywhere in the document? It works great when the following class is added to an element.
class=”cmVoice {cMenu:’conext_menu_1′}”
However, I have to open the context menu on right click on the document.
Thanks,
Senthil.
Hi Matteo,
very good job, thanks a lot.
I’ve just found this nice tool and played arround with the demopage – version 2.8.5 with FF 3.6 and IE7.
But I’ve just found a issue – for sure it’s a smaller one:
Select “menu 1″ -> “menu_2.4″ -> “sub_menu_2.1″
Than move the mouse upwards leaving the range of the menus and go left to the “menu_2.2″ – the first entry of “menu 1″. If this happens quick enough (say half a second), both items “menu_2.2″ and “menu_2.4″ are selected.
Chris
Matteo,
I’ve just found the reason …
as described above, this happens if you leave the sub menu container moving the mouse upwards and go left to the parent container, but not to a menu item but to the menu title (in this case “choose one of these links”).
Then if you go down to “menu_2.2″, both items are selected.
It’s not a matter of quickness and for me it’s not essential because I don’t need menu titles or menu text.
Thanks
Chris
Thnx Chris,
I tried to replicate this issue with no success…
Anyway I’ll take a look at this behaviour.
Bye,
Matteo