Materialize: listen to opening/closing event on sideNav
hello,
how can i check if my mobile is "opened" or "closed"? i want to switch the hamburger icon to a close icon if the nav is opened... and i couldn't find out how.
dstN
All 11 comments
Afaik there are no actual events. But show is triggering a click on the sidenav button (see here) and hide is triggering a click in $('#sidenav-overlay') (see here).
You could probably attach to these events.
Thanood
on 23 Feb 2016
why am i finding 16 results for "hide" in the unminified-js and only 9 in the minified-js.. that makes no sense at all.
dstN
on 23 Feb 2016
maybe comments :joy: :joy:
baraamashaal
on 23 Feb 2016
@Thanood i tried this with this code:
show : function() {
this.trigger('click');
$(".button-collapse").addClass("menuopen");
$("#nav-mobile").addClass("open");
},
hide : function() {
$('#sidenav-overlay').trigger('click');
$(".button-collapse").removeClass("menuopen");
$("#nav-mobile").removeClass("open");
}
but this doesn't work. no class is added.
dstN
on 1 Mar 2016
ok i think now it's working. only one thing which doesn't work:
if i use the hammer.js-extension where the user is able to drag the navi in and out the addClass-Stuff works, but i can't find the trigger where the navi gets dragged out. this is my only error i get.. the classes stay on the button and the nav if i drag the navi out.
dstN
on 1 Mar 2016
ok found everything:
i added my removeClass-Stuff in the "removeMenu();"-Function.
and everwhere it says menuOut = true, i added my addClass-Stuff and vice versa on menuOut = false except where menuOut = false is followed by removeMenu();.
dstN
on 1 Mar 2016
@Thanood can you tell me a bit more about how you hook into that ? I am having the same issue with my hamburger changing. One problem is that you can click anywhere to close the sideNav so my burger has no idea that it was closed. Is there a way to listen to the menuOut status? Thanks in advance for the help.
stueynet
on 3 Mar 2016
Sorry, I didn't actually try that yet. :smile:
I can try it tomorrow but now I have to get some sleep.
@stueynet I thought of something like $('#sidenav-overlay').on('click')
Thanood
on 3 Mar 2016
i used this manually fixed sidenav.js (written for my needs):
everywhere you see some "addClass("open") / addClass("menuopen")" or removeClass of the same classes i added that manually to get the wished effect.
dstN
on 4 Mar 2016
These events are exactly what I'm looking for. I'd like to submit a feature request for opening/closing (show/hide) events for the sidenav.
lance13c
on 22 Mar 2016
@lance13c I created a pull request that adds these events back in July, but it doesn't look like they've had a chance to look at it yet, but I've been keeping it up to date with master. So here's to hoping they get to it soon.
DonHartman
on 18 Nov 2016
Related issues
lpgeiger
路
3Comments
ruslandzhumaev
路
3Comments
bradley-varol
路
3Comments
ericlormul
路
3Comments
onigetoc
路
3Comments
Most helpful comment
@lance13c I created a pull request that adds these events back in July, but it doesn't look like they've had a chance to look at it yet, but I've been keeping it up to date with master. So here's to hoping they get to it soon.