Materialize: Allow to programmatically open and close the SideNav

[255kb]

If I am not mistaking, the SideNav cannot be opened or closed programmatically. This could be very useful, for example when we use a framework like Angular or Meteor, when the page is not reloaded after a click on a link.

Current workaround is to use something like $('#sidenav-overlay').trigger( "click" );

[vamsivarikuti]

Yes, I had this problem. When a user clicks on a link in sidenav, another view loads in the background but the sidenav still remains over the content.

Expected behavior: Sidenav hides itself after clicking on a link.

[lpgeiger]

It's also not working as expected on the materializecss.com demo http://materializecss.com/templates/starter-template/preview.html#

[dhyegocalota]

@255kb I've tested what you said and this looks pretty ok.

Try to open manually the sidenav and let this code do the job for you:

    <script>
      $(function() {
        setTimeout(function() {
          $("#sidenav-overlay").trigger("click");
        }, 5000);
      });
    </script>

Tested in this page. Is that it?

[acburst]

Added in a409efa5e12d054948a4554171d95ea598380317

// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');

[lpgeiger]

Can you post this in the documentation somewhere?

[acburst]

It is under sideNav.

[bhalalapj]

i am facing issue. while i host my website on server,

its working proper in local
$(...).sideNav is not a function.
is there any solution for that?

[Inventti-Marcel]

Hello everyone!

But if I don't want a button to show sidenav. Why do I need a button to show it? I don't have a button. I will open the sidenav programmatically.

How do I proceed ?

[ghost]

I have the same question as the last one. I'm opening sidebar programmatically with some other buttons. In my case, i have some functions on click on main button, so when i open sidenav with other buttons (programmatically), all functions of main button are executed as well.
Any idea how to solve this?

[StayAt]

for me it worked like this:

• Installation
• Handling
• bitcoins

[StayAt]

onclick="$('.button-collapse').sideNav('hide');"

bla

[basiljose1]

(function($){
$(function(){
$('.button-collapse').sideNav({
closeOnClick: true
});
});
})(jQuery);

pass closeOnClick: true on SideNav initialization ..it will work

[jdkealy]

Same question as Inventti-Marcel ... Makes no sense that I need a button to open this .

[ghost]

@jdkealy What I did was make a button and set the display to "hidden". Initialize the button like you normally would via js. Then, use whatever you want to toggle the side-nav. In my case, I'm using the tilde key (~) to toggle the side-nav. Unfortunately, I can't find a way to detect whether it is open yet or not. So I created a global variable to keep the toggle state for me.

Here's a jsfiddle