Trigger MDBootstrap side-nav with jQuery using custom hamburger button

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

Answers


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


Need Your Help

Scale div in an upwards direction, instead of down?

html css google-maps javascript

I have a custom info window over a google map, sometimes these info windows contain an image. When they do, the info window scales down over the marker it is positioned over as soon as the image has

Why/how is my PHP shared host setting argc/argv?

shared-hosting php

Until now, I had been checking for the presence of argc and argv in my script to determine whether requests were coming from the CLI, which worked on several development machines. When placed on a