Geek Answers Handbook

Trigger MDBootstrap side-nav with jQuery using custom hamburger button

This worked fine: http://jsfiddle.net/musicformellons/ef76gud7/

Now I would like to use MDBootstrap instead of Bootstrap, so I need to change 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 navigation (using my own animated hamburger, see fiddle): http://mdbootstrap.com/javascript/sidenav/

I can start side navigation with my hamburger by adding them to my hamburger button: data activates = "slide out" class = "Button collapse"

But then I lose the animation, since it is obvious that the autopsy navigation in bootstrap is no longer displayed.

? , jQuery ?!

: (1) MD bootstrap sidenav CSS, (2) "" sidenav. : , , , , :

: http://jsfiddle.net/musicformellons/rto14vzp/2/

:

  • JS CSS; mdbootstrap , , .
  • mdbootstrap ( URL CDN) mdbootstrap (side-nav ).
+4
1

, sideNav() jQuery. .nav-icon-line , :

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

, , sideNav() .

- :

reset , removeClass(). , , sideNav() - . , , sideNav() , , ; , , $("#nav-icon4").removeClass('open'); .

Codepen ( , , sideNav).

+1

More articles:


All Articles