The best place to find jQuery plugins !
Welcome on myjqueryplugins,
the best jquery plugins library !
Connect it with GitHub and create your plugin Homepage.
Make known your plugin to the community or link it to your own website !
The best place to find jQuery plugins !
Welcome on myjqueryplugins,
the best jquery plugins library !
Connect it with GitHub and create your plugin Homepage.
Make known your plugin to the community or link it to your own website !
Plugin submitted by alpixel
jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.
1 2 3 4 5 6 7 8 |
<!-- include CSS & JS files --> <!-- CSS file --> <link rel="stylesheet" type="text/css" href="jMenu.jquery.css" media="screen" /> <!-- jQuery files --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jMenu.jquery.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- First, write your HTML --> <ul id="jMenu"> <li><a class="fNiv">Category 1</a><!-- Do not forget the "fNiv" class for the first level links !! --> <ul> <li class="arrow"></li> <li><a>Category 1.2</a> <ul> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a></li> </ul> </li> <li><a>Category 1.2</a></li> <li><a>Category 1.2</a> <ul> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a> <ul> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> </ul> </li> </ul> </li> <li><a>Category 1.2</a></li> </ul> </li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(document).ready(function(){ // simple jMenu plugin called $("#jMenu").jMenu(); // more complex jMenu plugin called $("#jMenu").jMenu({ ulWidth : 'auto', effects : { effectSpeedOpen : 300, effectTypeClose : 'slide' }, animatedText : false }); }); </script> |
Comments
Nice plugin!
How do i handle the menu item selections ?
you can do something like this:
1) Ada
2) $(document).ready(function(){
$("#ada").click(function() {
alert('here we are');
}); ...
Hi, it doesnt work :/ Firebug Console says:
TypeError: $("#jMenu").jMenu is not a function
What should I do? sorry i dont know much 'bout jQuery...
is it RTL?????
doesn't seems so. sub menues are opened to the right instead of to the left in RTL context. play with firebug on the demo page to see.
Nice plugin!
It does not appear that there is an out of the box way to control the height. We would like to reduce the height of the top level elements. Am I missing something or can someone offer a workaround?
Thanks.
Hi,it doesn't work for Master Pages.
I did it for a simple page with the same code and it worked but for master page it didn't work.
Is there any way?
Thanks
Thanks for the work. Looks nice.
I need added 'z-index:10000;' in #jMenu li ul {...} to bring to the top.
How to keep top menu highlighted when child elements are hovered on?
any thoughts on what to do with a menu which has so many items they flow off the screen?
how can I implement your jparallax for super-large menus?
I like this menu but it's unfortunate that this requires jQuery UI
Hi,
In my case this does not work in newest Android browser.
How about you guys?
Very Good
Good plugin - simple, elegant and clean. I like your documentation and cross-browser compatibility info. Thx for that - saved me a lot of time. GJ
Would be very cool if sub menu can open inwards for the last menu item so it does not go out of the bound.
Nice Plugin. Simple and easy to custom.
But the 'auto' option for the "ulWidth" does not for me.
It seems that the width is calculate with the length of the Main menu title, and not with the longest word of the menu group (Menu & his submenu)
+1. I've check in the code and it does take its parent. I used a table, and it worked fine.
Fantastic Plugin, it is nice and smooth, but I need the menu to slide up... Any thought. I've been messing with it for a while and can't find it...
Nice work, im using this plugin in a vertical multilevel menu, on load its expanded spanshot link Vertical Menu, once i hovered on menu, then its working fine, need help
thanks, you saved me
My menu is located on the bottom of my page, how can I reverse the direction of the menu?
Hi Adrian,
You can't reverse the menu direction for the moment.
Regards,
very good and simple, thanks!
On some but not all Firefox browsers the menu opens above the bar but is not contiguous to the bar. I have run out of ideas. the site I am developing is http://catiii.com/matt
I can not see this on any machine I own but on at least one laptop and an older desktop it is visible. All with current java and Firefox.
Any help appreciated.
Is there a way to get the sub-menu to pop out to the right rather than the left?
Thanks
This option is not working for me.
ulWidth : auto - fix the the sub-menus widths.
Please let me know how to fix width of Submneus
Is there a way to close the menu by clicking outside the menu instead of closing when I move outside the menu?
Thanks. The plugin is cool.
I noticed that two menus can open at the same time if you move your mouse too fast. Is there something I can do to avoid that?
Hi Dinges,
Yes, you can avoid to do that ^^
Seriously, for the moment, i have no idea to avoid this problem :(
Regards,
I have been fighting this problem for the evening and I have found the problem. Basically it comes down to handling showing a menu and hiding all the others in the same 'mouseover' event.
If instead you split those tasks in a 'mouseenter' event for opening a menu, and a 'mouseleave' event for closing it again, all goes well.
Problem is though, that you cannot bind these two events to the same set of elements you do now ('.jMenu a.fNiv'). Because that means, that as soon as you move your mouse into the opened menu, the menu closes. Annoying.... But if you instead bind to '.jMenu > li', and rewrite the logic of the function a little bit, this problem can be tackled.
I came up with the following code, which works fine for me. But I don't care about effects and such, so it still needs some tweaking on that part:
$('.jMenu > li').bind({
mouseenter : function() {
var $li = $(this);
var $a = $li.children('a.fNiv');
var $ul = $a.next();
ULWidth = $.jMenu._returnUlWidth($a);
$ul.css({width: ULWidth});
$ul.show();
},
mouseleave: function() {
var $li = $(this); //li
var $a = $li.children('a.fNiv'); //a
var $ul = $a.next();
$ul.hide();
}
});
A similar problem exists for submenus, and I expect that the same approach works there as well, but I haven't gotten to that yet....
Gracias....!!! very nice
Hi.
I used jquery 1.9.1 and jquery-ui 1.10.3. The menu shown in vertically not horizontally, which can be happening? Thanks.
Strange. I am getting same issue using Jquery 1.9.1 and UI 1.10.2. It works fine on my desktop but as soon as I implement in server, its all vertical. Any clue how this can be fixed?
Try adding the jQuery migrate script. It resolves upgrade issues with jQuery 1.9. http://blog.jquery.com/2013/05/01/jquery-migrate-1-2-0-released/
You should take part in a contest for one of the greatest blogs on the internet. I most certainly will recommend this blog!
Fantastic site you have here but I was wanting to know if you knew of any discussion boards that cover the same topics discussed in this article? I'd really like to be a part of community where I can get feed-back from other knowledgeable people that share the same interest. If you have any suggestions, please let me know. Thanks!
Add new comment