Thursday, April 21, 2016

Trigger MDBootstrap side-nav with jQuery using custom hamburger button

By Hường Hana 7:30 AM , , , , Leave a Comment

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

1 Answers

Answers 1

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment