The metismenu's discuss from onokumus

Highlight active leaf item

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!

toggle doesn't work when no sub-menu is present

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

Tag for v1.1.3

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.

Dependency on bootstrap

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

dropdown's within the navbar are sluggish and intermittent

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.

Nice to have: mini side bar menu

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

metisMenu as a drop down rather than a sidebar

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.

jQuery animate instead CSS3 transitions

OK.

Multi-level keep menu open

Hello,

With the current version only the first sub-level (

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

Is this possible by modifying the js ?

Does not apply bootstrap theme

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

focus on and open toggle menu

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?

Menu with default item opened

Hi!

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

Thanks in advance

Remove collapse animation on submenu

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

Arrow toggle is not working

span fa arrow not showing

delegate events

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="#"> {{item.title}}</a>
<ul class="nav nav-second-level">
<li class="active" ng-repeat='itemLv2 in item.childsLv2'>
<a href="#">{{itemLv2.title}}</a>
<ul class="nav nav-third-level">
<li ng-repeat='itemLv3 in itemLv2.childsLv3'>
<a href="#"> {{itemLv3.title}}</a>
</li>
</ul>

</li>
</ul>

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

Extending the toggle feature a bit

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/

CDN

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

URL recognition isn't quite magic enough

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.

Minimum jquery version for using metis menu.

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.

Feature: add cookie for menu state

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

Improvement: Active class for child item

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

File not found in demo example

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 :)

Can get json format from server side?

Great job!
Can get json format from server side?

Make parent <li> a link, navigate and expand children upon clicking.

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.

Suggestion to make the .arrow class name more specific

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?

Demo is not working

Hey, looks like demo page is broken.

metisMenu.d.ts

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

Disable

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.

Animations duplicate on Safari browser

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.

More levels

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

Feature? - expand on hover

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

Demo code pulls old version from CDN

The index.html demo pulls:

  
"//cdn.jsdelivr.net/bootstrap.metismenu/1.1.0/js/metismenu.min.js"

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

Steve

ie8/9 issue

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

Suggestion for changing the .active class name

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!

Tag for version 1.1.0

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

Plugin not work

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

sub menu toggle not work in right to left

hello
sub menu toggle not work in right to left

How to keep menu item after click?

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

Bootstrap in depedency

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.

Bower.json: main

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

Open level of active only?

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

expand

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');
        }

Menu items are not clickable?

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

Open a custom menu with IE8-9

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.

Please get onto composer! ;)

Thanks!

while doesn't loop

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;
        }

2nd click goto page

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

IE8 Collapse Issue

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');

Is it possible to add link and collapse/expand behavior to menu item?

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

Adding items to menu

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

items after fetching data from an API asynchronously. It does not seem to be possible to make metis menu work for

items that are added at a later stage. I can call $('#side-menu').metisMenu() a second time but it won't pick up the new items.

onokumus / metismenu Goto Github PK

metismenu's Issues

Recommend Projects

Recommend Topics

Recommend Org