Trigger MDBootstrap side-nav with jQuery using custom hamburger button

Question

This was working fine: http://jsfiddle.net/musicformellons/ef76gud7/

Now I would like to use MDBootstrap instead of Bootstrap and so I have to alter this jQuery code:

$(document).ready(function () {
    $('#navbar').on('show.bs.collapse', function () {
        $('#nav-icon4').addClass('open');
    });
    $('#navbar').on('hide.bs.collapse', function () {
        $('#nav-icon4').removeClass('open');
    });
});

to work with this side-nav (using my own animated hamburger, see fiddle): http://mdbootstrap.com/javascript/sidenav/

I can trigger the side-nav with my hamburger by adding these to my hamburger button: data-activates="slide-out" class="button-collapse"

But then I loose the animation, since obviously the bootstrap navbar collapse is no longer shown.

How can I have my hamburger animation together with the new side-nav? Probably the cited jQuery code needs to be adjusted completely?!

So following is needed: (1) trigger MD bootstrap sidenav from another CSS button then its default one (2) the hamburger animation should stay 'in sync' with the sidenav. For instance: just using toggle it would probably loose sync as I had similar experiences before: Bootstrap navbar toggle not in sync with dropdown menu

You could use this fiddle as a starting point: http://jsfiddle.net/musicformellons/rto14vzp/2/

Comments regarding the fiddle:

ignore the JS and CSS resource panel message; i tried adding
mdbootstrap via the resource panel and it did not work whereas current approach does.
the reference to mdbootstrap (via CDN url) refers to the free part of mdbootstrap (the side-nav is part of the free package).

when you loose animation can you make fiddle ? actually i confuse with your question — Ismail Farooq
@IsmailFarooq I tried making a fiddle with a mdbootstrap side-nav. It seems mdbootstrap does not work as a fiddle (maybe because cdn urls are http instead of https). — musicformellons
This request doesn't really make any sense. If you have a sidenav hamburger menu and the side menu slides out, it will cover the icon before the animation can visibly occur to your user. — serraosays
@staypuftman YES it does, since obviously it will NOT be covered. Not 100% "material design", but it is exactly what I want. — musicformellons

serraosays serraosays · Accepted Answer · 2016-04-20T17:34:37

The most direct answer to your question is that you need to chain the button animation and sideNav() opening triggers together with one jQuery statement. If you add .nav-icon-line to your spans, that would look like this:

  $("#nav-icon4, .nav-icon-line").click(function() {
    $("#nav-icon4").addClass('open');
    $(".button-collapse").sideNav();
  });

There is a lot more going on here that I can't really get into because the source of sideNav() isn't freely available with the framework you are using.

Something else to consider:

You'd need to reset the hamburger animation in the same way by using removeClass(). I'm not really sure how that would work because sideNav() is a black box. From what I can see, sideNav() seems to hide the sidebar when you click outside of it; figure out what function controls that and put $("#nav-icon4").removeClass('open'); into the function.

Codepen example (not fully functional yet, depends on figuing out what's happening inside of sideNav).

Trigger MDBootstrap side-nav with jQuery using custom hamburger button

1 Answers