The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jMenu : Horizontal navigations with unlimited dropdown sub-menus

Plugin rate :

August, 13th 2013 : jMenu v.2.0 !!

We totally rewrite the plugin. jMenu is now more light (100 lines less), and keep the same options as before !

 

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.

Implementation: 

1. First, include the css & jQuery files

1
2
3
4
5
6
7
8
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jmenu.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.min.js"></script>

2. Now, add your HTML list

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
<!-- First, write your HTML -->
<ul id="jMenu">
  <li><a>Category 1</a>
    <ul>
      <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>

3. Finally, make a simple jMenu plugin call

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>
Options: 
openClick
Boolean
Default : false - Choose if jMenu opens by clicking or hovering.
ulWidth
Integer
Default : auto - fix the the sub-menus widths.
absoluteTop
Integer
Default : 30 - The top pos (absolute) in pixel of the sub-menu compared to the parent.
absoluteLeft
Integer
Default : 0 - The left pos (absolute) in pixel of the sub-menu compared to the parent.
effectSpeedOpen
Integer
Default : 150 - In ms, slideDown/fadeIn speed of the sub-menus.
effectSpeedClose
Integer
Default : 150 - In ms, slideUp/fadeOut speed of the sub-menus.
effectTypeOpen
String
Default : slide - Can be set to 'slide', 'fade' or '' (empty)
effectTypeClose
String
Default : hide - Can be set to 'slide', 'fade' or 'hide' (empty)
effectOpen
String
Default : linear - All jQuery UI effects allowed
effectClose
String
Default : linear - All jQuery UI effects allowed
TimeBeforeOpening
Integer
Default : 100 - In ms, waiting time before sub-menus slideDown/fadeIn effects.
TimeBeforeClosing
Integer
Default : 100 - In ms, waiting time before sub-menus slideUp/fadeOut effects.
animatedText
Boolean
Default : false - If true, animations on the hover (see the next option paddingLeft).
paddingLeft
Integer
Default : 7 - In pixel, the padding-left animation on the hover.
Screenshots

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.

If you set "ulWidth: -1" CSS will ignore the value and instead will behave as wanted.

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!

Great menu, has anyone added this plugin to WordPress? I need to add the fNiv class to the first anchor in the first list item and I'm not sure how to do that using the WordPress Menu functionality.

http://codex.wordpress.org/Function_Reference/wp_nav_menu

I'm sure I can do something with a function that selects it, but I don't have the expertise to go about it. Any help would be greatly appreciated.

There is a way for do not show the arrows?

Hi Oscar,

Arrows are shown with the css. Just edit the css file :)

Regards,

I have used your jmenu but I'm having problems in IE7, all other browsers seem to work ok?!? Any ideas??

Hi,

Is there a way to change the color of the dropdown and the color of the text?

Thanks

Hi Joel,

You can use the CSS file for that :)

Regards,

Hello.

I'm experiencing some problems while using this plug-in. When I try to load my page, 2 errors pop up in my Chrome console window:
1 Uncaught ReferenceError: jQuery is not defined
The error points to this line of code:
...
b.fn[c] = function(a) {
a = 0;
b(this).each(function() {
a += b(this).data(c)
});

return a > 0;
}
}(jQuery,'isHovered')); <-- Line of code

2 Uncaught TypeError: Object [object Object] has no method 'jMenu'

This error pops up when I try to invoke the jMenu-method.

Does anyone have an idea how to solve this?

Is the css file editable. Because when I tried to edit it there is no effect on the menu

Hi,
For sure the CSS file is editable :)
Strange... o_O

For those who want to have the previous level active, add this css

li ul a:hover, ul li li:hover > a, li ul ul a:hover, ul li li li:hover > a {
color: $white;
background: $red;
}

Hi I've had some compatibility issues with Internet Explorer, the thing is that when I click on one of the submenues it opens and closes to quickly as to click something

Any idea?

It does not work properly in latest Firefox (Win). Wrong positions.

Hi Michal,

Thanks for your report.
jMenu works now properly on Firefox. The problem cames from the CSS file (position:relative on li elements).

Regards,

IE doesn't support the css "display:table;" or "display:table-cell;". Firefox shows it correctly, but IE doesn't.

"z-index: 9999;" seems not to work in IE. Any idea?

Any updates coming for IE 10? It is currently working for me in IE 10 but my drop downs are about 2x the size than what they are normally.

Если ulWidth = auto, то все хорошо. Но если нет, меню начинает перекрываться. Ибо косяк ;)

Set the ulWidth = 100px in http://demos.myjqueryplugins.com/jmenu/
and go to Category 1 -> 1.2 (1st item)

I am getting an error on the line

("#top-menu").jmenu()

The error is

TypeError: Object [object Object] has no method 'jmenu'

I installed the updated jmenu js and now my submenus are not the same size as the parent. Is there a way in the script to change this? I tried changing the following but had no effect.

if(opts.ulWidth == 'auto')
$width = $('.fNiv').outerWidth(true);

Firefox 22.0 with today's build of jmenu... mailto: links don't seem to work when openClick : true

I have two jMenus on same page, each with their own css files. The second menu is using the first menu color scheme for the drop-down and hover.

How do I force the second menu to use the proper css file?

I can't seem to get the Child-Sibling thing working. See

Hoping you can help!
Frustrated in Sacramento, CA
Arlene

Hi,
have you try your plugin in compatibility mode with Internet Explorer?
I doesn't work correctly.

Can you help me?

Sacha

This plugin does NOT work on JQuery 1.3.2 even though it states: "Informations jQuery >= 1.3" on the upper right side of this page. We're in a position at this point where upgrading our JQ core is not an option.

I'm having an issue where I go to click a submenu link and I'm not being directed anywhere.

How to center this menu???
margin: 0 auto rapes this menu when you resize your browser... you need to refresh your site to see menu with correct positions...

In the screen shots there are arrows to indicate parent items. I only see that implemented in the screen shots not in the actual demo. Was that done through customizing the styling?

change line 49:
$width = opts.ulWidth;
to
$width = opts.ulWidth*1;

this avoids wrong position calculation of submenus because of a type error.

Hey guys,

i've got a problem while using the problem.
The problem was that all "ul" Elements were not at the left of their parents. I found that jquery use the $width as a string, so there couldn't be set a new "left".
This solved the Problem; change:
$width = opts.ulWidth;
to
$width = parseInt(opts.ulWidth);
This will help ;)

Just comment line 47($width = $('.fNiv').outerWidth(false)) and line 71 and 77 (width: $width).

The width will be the width of the larger li.

Thank you

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
jQuery U.I
>= 1.3
Current version
2.0
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [67]