The index.html demo pulls:

i.e. not the latest version of metismenu.min.js.

Steve

Hi,

When the menu is open and one of the sub menu has a href set to another page. Is it possible to once navigated to keep this menu open. I tried with jquery cookie but it is not working properly see below code :

        var menuCookie = $.cookie('cookie_collapse');
        $(".nav-second-level li a").click(function (e) {
            menuCookie = $.cookie('cookie_collapse', $(e.target).attr('id'));
            console.log(menuCookie);
            e.stopPropagation();
        });

        console.log(menuCookie);
        if (menuCookie) {
            $('#' + menuCookie).parent().parent().parent().addClass('active');
        }

Hi,

I think an active class should be added for menu item selected (child item).
This is also confusing because in your code the active class is for open state instead of active (selected).
bug #33
I was looking for that because I want to add the active class to the selected sub-item.

Parent 1
------ Child A
-------Child B (selected/clicked)
-------Child C

Hi!

I want to set an default item active in menu. It's possible do to that?

Thanks in advance

I was having an issue with this plugin working in IE8. Clicking a menu item once would do nothing but the second time would toggle the collapse. I corrected the issue by modifying the Plugin.prototype function to the below.

$this.find('li.active').has('ul').children('ul').collapse('show');
$this.find('li').not('.active').has('ul').children('ul').collapse('hide');

OK.

Is it possible for desktop use to expand the menu on a hover of the mouse ?

I would like to know if there is a way to maintain the active menu selection after click and after losing focus.

I think the 'main' property in bower.json should have a value of "dist/metisMenu.js" rather than "metisMenu.js". As it is currently, build tools will not find any metisMenu.js in the root directory...

Hi,
This plugin is great, but not work at all.
Not work your demos: if i extract all zip folder and lunch /test/ files like hover.html, metisFolder.html and others. All CSS is broken and no js functionality.

If i try to use in my website (with bootstrap 100% included and work good). same results...

Why this happen? in true seem a your error in create download package.
Thanks

Hello Onokumus

I was wondering if you could help me with a code change please?
I recently implemented your metismenu here: http://bit.ly/1hus0IV
The items on the menu that are marked in blue e.g. "Adult Costumes" or "Childrens Costumes"
I need them to be clickable. They are meant to go to a page on the website.

At the moment the link is somehow turned off.

How do I change this?

Thanks very much.

Cheers

Collapse issue, same like #7 but its not working

if you open it on Internet Explorer you have to open -> close -> open to view the child menu.

Even the repo demo is not working on IE

Will the metis menu work with jquery 1..3.1.Earlier i was using version 2.1.1 and it was working properly.I have to use version 1.3.1 because my organization has strict restriction to use this version.Please help me with this scenario.

Hi,

Here http://demo.onokumus.com/metisMenu/
If you click on item "Menu 1.3" it expands or collapse children items.
Is it possible to implement that if I click on text "Menu 1.3" it will navigate to "menu13.html", but if I click on plus sign on the right corner it will just expands or collapse children items.

Thank you

http://www.frostjedi.com/terra/scripts/demo/metis.html

Sometimes the #problem <ul> "opens" with a height of 0px and when it doesn't it opens sluggishly. I don't think the description I gave is very helpful but hopefully the link will demonstrate what I mean.

Hello,

With the current version only the first sub-level (

) keeps open when the page reload.

I need the menu to keep the same behavior for the next sub-level (

). The class is set to active for the .

Is this possible by modifying the js ?

span fa arrow not showing

Thanks!

Is it possible to leave the selected menu open after click? It is possible to change the script on the end page to leave the selected menu open after click?

Closed menu (at start)

Country 1
Country 2
Country 3

Opened menu after click on Country 2

Country 1
Country 2
--Region 1 > Click on this item
--Region 2
--Region 3
Country 3

Country 1
Country 2 This level should be opened
--Region 1 > This item should be active
--Region 2
--Region 3
Country 3

I am building a backbone client app that adds one or more

I found this structure twice in the code. Looks like a flow control issue

  while (
            div.innerHTML = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->",
            all[0]
        ) {
            return v > 4 ? v : undef;
        }

Is it possible to remove the animation from submenu's only?

Just a suggestion: maybe the .active class name should be changed to .open: IMHO, the .active class name should be used only for the list item bound to current page opened
Anyway, metisMenu is a GREAT job: thank you!

I'm trying to implement the intl-tel-input plugin and there is a conflict with metisMenu regarding the .arrow class.

The issue is that while intl-tel-input specifies the selector as specific:
.intl-tel-input .selected-flag .arrow {

metisMenu has a broad selector that captures everything, including other elements:
.arrow {

This results in some important styles being overwritten and forces me to reset the defaults on my app's CSS.

Is it possible to refactor the stylesheet for metisMenu to be more specific as to isolate the effect it has on other controls in the same application?

http://demo.onokumus.com/metisMenu/hover.html

http://cdn.jsdelivr.net/bootstrap.metismenu/1.1.3/css/metismenu.min.css
File not found

Pls fix :)

I'm using it with inventive ui so I don't need bootstrap in bower components though it still download that.

Its possible to use your product without bootstrap so you can include general version and bootstrap version.

There should not be dependency in package itself when it can easily be replaced with generic.

This way you can reach all audiences not specific ones.

playing around with the menu so that hides and shows panels. However when toggle is enabled it won't collapse an active link until something else is active.

http://jsfiddle.net/eephillip/46huu/

To have the option to transform the menu to mini menu bar with Icons

Hello

I would like MetisMenu to work as a dropdown menu item from a navbar rather than a sidebar.

I can get a normal navbar with a dropdown to work:

http://michaelruddock.co.uk/02navdropbar.php

But when I add metisMenu to a page the dropdown stops working:

http://michaelruddock.co.uk/metis/index.html

If I try to add metisMenu to the navbar as an item the whole navbar becomes messed up

Any ideas?

Thanks.

Please submit this fine work to CDN services like jsDelivr & cdnjs.

Haven't looked into how hard it would be, might be nice to make a Typescript d.ts file for this.

Hi, I found out that toggle doesn't work right with items that don't have sub-menus.

For example:

<ul id="menu">
    <li><a href="#/page1">Page 1</a>
        <ul>
            <li><a href="#/sub-page1">Sub-page </a></li>
            <li><a href="#/sub-page2">Sub-page 2</a></li>
        </ul>
    </li>
    <li><a href="#/page2">Page 2</a></li>
</ul>

The problem is line 37 in the code:

$this.find("li").has("ul").children("a").on("click" + "." + pluginName, function(e) ...

Everything works fine when I remove .has("ul") from the code.

The thing is I'm working with angular and not using direct links but routing based on my location, so even when the link doesn't have a sub-menu, it still doesn't go to a new page but should toggle the other menus.

Cheers,
Jan Fucik

Why did you add dependency on bootstrap in version 1.1.2?

The problem is there are 2 version of bootstrap: bootstrap and bootstrap-sass. And now it's hard to use metisMenu with the second one because it require to install unnecessary bootstrap.

Can we do anything with this?

Thank you for your work on metisMenu ❤️!

I'd like to highlight the current "clicked" (active) link at the leaf level, how can I do that?

Currently, the "active" css class is added only to the items which are menu or sub-menu, but I'd like to
add an active status to the "ul ul ul a"

I added this css code:

.sidebar-nav ul ul ul a:hover,
.sidebar-nav ul ul ul a:focus,
.sidebar-nav ul ul ul a:active {
background-color: rgba(0, 0, 255, 0.15);
background-color: rgba(0, 0, 255, 0.15);
}

the leaf are highlighted on mouse over, but when the link is clicked the doesn't remain highlighted!

How to do when user clicks on second time on the parent it should navigate to page directly?

Is there a way that I can add more levels to the menu,. I see only

Root

• level 1
  -- level 2
  --- level 3
  ---- level 4 (how can i do this?)

I would like to add a level 4

Thanks again for amazing work

hello
sub menu toggle not work in right to left

Are you planning to add a way to remember menu state using cookie
or localstrorage?

metisMenu works great on every browser I have tested it on, except for Safari. I have tested on both OS X Mavericks and Yosemite with the same outcome.

When clicking on a menu category, the expanding animation occurs twice in a row. After the first animation, it resets and does it a second time.

Hi, as cdnjs/cdnjs#3999 (comment) said, I think you forgot to add tag for v1.1.3, so that cdn service will not update it.

Is this doable? The current behavior will ignore any <a href="www.link.com"> placed inside the parent <li>tag and just expand the list. It would be great for each list item to have the capability to have a link AND an expand button.

Hello,

I want to focus on and open toggle menu item.
I mean for example if I click on first level nav I want to show a page and to open the accordion menu to see the second level nav. Right now it's only possible to open the accordion menu.
Is that possible?

hi,

I am trying to use the menu with angular, and the html does not exist when the plugin is called in de document ready.

when you apply the events you use:
$this.find("li").has("ul").children("a").on("click", function(e) {

this requires the html markup exist, and creates one event for every link, i have change in my local version for some thing like
$this.on( "click", "a", function( e ) {

this change creates only one event.

i don´t know if this change is usefull.

p.d. if you want to try witdh angular this is my aproach

the html
<li class="active" ng-repeat='item in items'>
<a href="#"><i class="fa {{item.icon}} fa-fw"></i> {{item.title}}<span class="{{item.arrow}}"></span></a>
<ul class="nav nav-second-level">
<li class="active" ng-repeat='itemLv2 in item.childsLv2'>
<a href="#"><i class="fa {{itemLv2.icon}} fa-fw"></i>{{itemLv2.title}}<span class="{{item.arrow}}"></span></a>
<ul class="nav nav-third-level">
<li ng-repeat='itemLv3 in itemLv2.childsLv3'>
<a href="#"><i class="fa {{itemLv3.icon}} fa-fw"></i> {{itemLv3.title}}</a>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>

the js
var app = angular.module('consolas', [ 'ngRoute' ]);
function SideBarController($scope) {
$scope.items = [ {
title : 'JASOP Bundlor',
page : 'index',
icon : 'fa-sitemap',
arrow: 'fa arrow',
childsLv2 : [ {
title : 'Transaction Processing',
page : 'transactionLogic',
icon : 'fa-dashboard',
arrow: 'fa arrow',
childsLv3 : [ {
title : 'Transaction logic',
page : 'transactionLogic',
icon : 'fa-table'
}, {
title : 'Transaction config',
page : 'transactionConfig',
icon : 'fa-table'
} ]
}, {
title : 'Online Applications',
page : 'onlineApplications',
icon : 'fa-dashboard'
} ]
}, {
title : ' JASOP Online',
page : 'index',
icon : 'fa-sitemap',
arrow: 'fa arrow',
childsLv2 : [ {
title : 'OSGI',
page : 'bundles',
icon : 'fa-dashboard',
arrow: 'fa arrow',
childsLv3 : [ {
title : 'Bundles',
page : 'bundles',
icon : 'fa-table'
}, {
title : 'Configuration',
page : 'configuration',
icon : 'fa-wrench'
}, {
title : 'Log service',
page : 'logService',
icon : 'fa-edit'
}, {
title : 'Services',
page : 'services',
icon : 'fa-table'
} ]
}, {
title : 'Memory Usage',
page : 'memoryUsage',
icon : 'fa-bar-chart-o'
}, {
title : 'System information',
page : 'systemInformation',
icon : 'fa-edit'
}, {
title : 'Licenses',
page : 'licenses',
icon : 'fa-files-o'
}
]
}
];
}

thanks

I'm trying to use metisMenu on our admin area. When I go to the URL /admin/reports/monthly_sales/, all three listed below are highlighted in the menu. As the admin area is namespaced, all the URLs start with /admin/, therefore visiting any URL will highlight the root admin link.

/admin/reports/monthly_sales
/admin/reports
/admin

I don't know if it's related, but any option at the third level is collapsed, rather than remaining expanded as it should.

Versión 1.1.0 don't have tag. This is a little problem for bower users, that want use it.

How to disable a item of list? Disabling means preventing to expand the item. Adding the .disabled of bootstrap causes the visual effect but still can be expanded.

Hi,
Firstly Thx for this great and easy Plug-in. ;)
I have a little problem when i want to open any submenu on IE8-9
At the first click on each item, nothing happend (other than the rotation off the arrow) and after the sub-menu work correctly.( with the arrow time lag )

appear here: http://demo.onokumus.com/metisMenu/
But not here: http://jsbin.com/saxohibu

If have an idea about the problem. ;)

Thx.

Great job!
Can get json format from server side?

It does not apply Bootstrap themes. If it does not apply bootstrap themes so what makes it a bootstrap menu.

Hey, looks like demo page is broken.