如果菜单处于活动状态或非活动状态，则切换图标的类。 多级推菜单

Question

I am using the multi-level push menu as found here

I am trying to add and remove a class when the menu is in the active or inactive state.

I've tried to implement this on my own using a function which is toggled on an inactive class (.multilevelpushmenu_inactive) but I could not get that to work. So now I am trying to use the inbuilt callback functions.

These are documented here

The issue seems to be that there is no callback for detecting when the menu is inactive (ie when all animations have completed and the menu is back at the starting position). The onCollapseMenuEnd for example will fire when any of the sub menus are opened/closed.

I have put everything in a fiddle, but my code looks like this:

 // global vars
var _leftMenu = $('#leftMenu');
var _icon = _leftMenu.find('.fa');
var _menu = _leftMenu.find('.vert');

// pushmenu options
_leftMenu.multilevelpushmenu({
    containersToPush: [$()],
    collapsed: true,
    backText: '',
    backItemIcon: 'fa fa-reply',
    menuHeight: '100%',
    onExpandMenuStart: function () {
        _icon.addClass('fa-times').removeClass('fa-reorder');
        _menu.fadeOut();
    },
    onMenuReady: function () {
        _icon.addClass('fa-reorder').removeClass('fa-times');
        _menu.fadeIn();
    }
});

Fiddle 1

I am not sure if there is a way to trigger the onMenuReady callback inside another callback function.

I can add HTML into the question if that helps, but everything is available in the fiddle.

EDIT

For what it's worth, I've made a fiddle showing my original function working on the navigation element. This is almost working entirely, the exception is when you drill down to a deeper navigation item (Select Motivate, then either of the sub menus) when you try and close the navigation, the classes are not being toggled in the final step). Here is the jquery for this function:

_icon.on('click',function(){
    if($('.multilevelpushmenu_inactive')[0]){
        _menu.fadeOut();
         $(this).addClass('fa-times').removeClass('fa-reorder');
    }else{
        _menu.delay(500).fadeIn();
        $(this).addClass('fa-reorder').removeClass('fa-times');
    }
});

Fiddle 2

Answer 1

I think a solution is to check the current level of the active menu inside of onCollapseMenuEnd callback and if it's null you can change the icon to fa-reorder .

The following code is preventing that the close icon is changed before the last level is closed:

    onCollapseMenuEnd: function (options) {
        var level = _leftMenu.multilevelpushmenu('activemenu').data('level');
        console.log('collapsing start.. level=' + level);
        if (level === null) {
            console.log('inactive');
            _icon.addClass('fa-reorder').removeClass('fa-times');
            _menu.fadeOut()
        }
    }

Please find the demo below and here at jsFiddle .

Don't know if there is an easier or better way to do it, but it seems to work like you wanted it.

(The active class with the click handler is just a test. I first thought you'd like something like this.)

The demo here looks a bit different than in the fiddle, don't know why. But the icon changes like in the fiddle.

 $(document).ready(function () { // global vars var _leftMenu = $('#leftMenu'); var _icon = _leftMenu.find('.fa'); var _menu = _leftMenu.find('.vert'); // get the actual doc height when everything has loaded chHeight = function () { var fullHeight = Math.max($(document).height()); _leftMenu.css('min-height', fullHeight); }; // pushmenu options _leftMenu.multilevelpushmenu({ containersToPush: [$()], collapsed: true, backText: '', backItemIcon: 'fa fa-reply', menuHeight: '100%', onExpandMenuStart: function (options) { console.log(options); var level = _leftMenu.multilevelpushmenu('activemenu').data('level'); console.log('expanding start.. level=' + level); _icon.addClass('fa-times').removeClass('fa-reorder'); _menu.fadeOut(); }, onCollapseMenuEnd: function (options) { var level = _leftMenu.multilevelpushmenu('activemenu').data('level'); console.log('collapsing start.. level=' + level); if (level === null) { console.log('inactive'); _icon.addClass('fa-reorder').removeClass('fa-times'); _menu.fadeIn() } }, onMenuReady: function () { _icon.addClass('fa-reorder').removeClass('fa-times'); _menu.fadeIn(); }, onItemClick: function () { // First argument is original event object var event = arguments[0], // Second argument is menu level object containing clicked item (<div> element) $menuLevelHolder = arguments[1], // Third argument is clicked item (<li> element) $item = arguments[2], // Fourth argument is instance settings/options object options = arguments[3]; // You can do some cool stuff here before // redirecting to href location // like logging the event or even // adding some parameters to href, etc... $('li').removeClass('active'); // reset any active element $item.addClass('active'); // set active class // Anchor href //var itemHref = $item.find( 'a:first' ).attr( 'href' ); // Redirecting the page //location.href = itemHref; } }); $(document).bind('DOMNodeInserted ajaxComplete', function () { chHeight(); }); }); 

 body { font-family:Helvetica, Arial, sans-serif; } /* line 1525, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper { position: absolute; overflow: hidden; min-width: 100%; min-height: 100%; margin: 0; padding: 0; } /* line 1533, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .levelHolderClass { position: absolute; overflow: hidden; top: 0; background: #1a1a1a; width: auto; min-height: 100%; font-family: sans-serif; font-size: 1em; zoom: 1; } /* line 1545, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .multilevelpushmenu_inactive { background: #1a1a1a; } /* line 1549, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper h2 { font-size: 1em; line-height: 1em; font-weight: normal; color: #fff; padding: 0 0 0 30px; } /* line 1556, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper h2.icon-heading { padding: 0 .4em 0 .4em; } /* line 1560, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper h2 i { position: relative; top: -5px; right: 4px; font-size: 1.5em; } /* line 1568, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper ul { list-style: none; padding: 0 30px; margin: 0; } /* line 1573, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper ul.first { margin-top: 60px; } /* line 1578, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper li { cursor: pointer; border-top: 1px solid #333; padding: 10px 2px; } /* line 1583, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper li:last-child { border-bottom: 1px solid #333; } /* line 1587, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper li:hover { background-color: #333; } /* line 1592, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper a { display: block; outline: none; overflow: hidden; font-size: 1em; line-height: 1em; padding: .2em .2em; text-decoration: none; color: #fff; } /* line 1603, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .backItemClass { display: block; padding: 10px 2px; background: none; border-top: none; margin: 0 30px; } /* line 1611, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .floatRight { float: right; } /* line 1615, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .floatLeft { float: left; } /* line 1619, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .cursorPointer { cursor: pointer; } /* line 1623, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .iconSpacing_ltr { padding: 0 .4em 0 0; } /* line 1627, ../sass/layout/_ReWork.scss */ .multilevelpushmenu_wrapper .ltr { margin-left: -100%; left: 0; border-right: 1px solid #333; } /* line 1634, ../sass/layout/_ReWork.scss */ #leftMenu { position: absolute; top: 0; background: #1a1a1a; color: #fff; z-index: 1; border-right: 1px solid #333; } /* line 1643, ../sass/layout/_ReWork.scss */ #leftMenu .toggle-menu, #leftMenu .back-button { position: absolute; top: 5px; right: 10px; color: #fff; font-size: 1.5em; } /* line 1650, ../sass/layout/_ReWork.scss */ #leftMenu .toggle-menu:focus, #leftMenu .back-button:focus { outline: none; } /* line 1655, ../sass/layout/_ReWork.scss */ #leftMenu .back-button { display: none; right: 50px; } /* line 1662, ../sass/layout/_ReWork.scss */ #leftMenu.open .back-button { display: block; } /* line 1667, ../sass/layout/_ReWork.scss */ #leftMenu .vert { position: absolute; top: 45px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); } /* line 1675, ../sass/layout/_ReWork.scss */ #leftMenu ul#mainNav { margin: 40px 0 0 0; padding: 0 20px; list-style: none; } /* line 1682, ../sass/layout/_ReWork.scss */ #leftMenu ul#mainNav li a { display: block; color: #fff; font-size: 0.8em; text-decoration: none; } /* line 1688, ../sass/layout/_ReWork.scss */ #leftMenu ul#mainNav li a:focus { outline: none; } /* line 1693, ../sass/layout/_ReWork.scss */ #leftMenu ul#mainNav li ul { padding: 0; margin: 0; list-style: none; } .active { background-color: blue; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> <script src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script> <link href="https://rawgit.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.css" rel="stylesheet"/> <script src="https://rawgit.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.min.js"></script> <div id="leftMenu"> <nav> <h2 class="icon-heading"><i class="fa fa-reorder"></i></h2> <ul class="first"> <li><a href="#">Communicate</a> <h2>Comminucate</h2> <ul> <li><a href="#">Overview</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Features</a> </li> </ul> </li> <li><a href="#">Motivate</a> <h2>Motivate</h2> <ul> <li><a href="#">Sales Manager Q1 Incentive</a> <h2>Programmes</h2> <ul> <li><a href="#">Retailer Performance Report</a> </li> <li><a href="#">Retailer Performance Chart</a> </li> </ul> </li> <li><a href="#">Boutique Vehicle Order Tool</a> <h2>Programmes</h2> <ul> <li><a href="#">Order Form</a> </li> <li><a href="#">Order Report</a> </li> </ul> </li> </ul> </li> <li><a href="#">Educate</a> <h2>Educate</h2> <ul> <li><a href="#">Overview</a> </li> <li><a href="#">Resource Centre</a> </li> <li><a href="">Network</a> </li> </ul> </li> <li><a href="~/celebrate/">Celebrate</a> </li> <li><a href="~/reports/">Reporting</a> </li> </ul> </nav> <p class="vert">Menu</p> </div>