Material-design-lite: How to close the drawer?

Created on 7 Jan 2016 · 5Comments · Source: google/material-design-lite

Hi,

I have a question. I click on the menu button to open the drawer and click a menu item. The drawer does not close after clicking an item. Is there a way to configure the menu or trigger the drawer to close after a menu item has been clicked?

Thanks,
Kerry

Source

ktodyruik

Most helpful comment

Unfortunately I think this method: $('.mdl-layout').MaterialLayout.toggleDrawer() assumes that you will be using jQuery. I am not. I got it to work by using pure JS. I simply set an ID on my .mdl-layout container and referenced that dom element:

document.getElementById('app').MaterialLayout.toggleDrawer()

Where app was the id of my .mdl-layout container.

runningrandall on 16 Feb 2017

👍5

All 5 comments

You are right, the drawer doesn’t close because usually the drawer contains links causing a full reload.

We have added the toggleDrawer() function and it will ship with 1.1 (probably next week).

With that you can $('.mdl-layout').MaterialLayout.toggleDrawer() in your JS :)

surma on 7 Jan 2016

👍2

@surma 1.1 will probably ship next week :tada: Great news and thank you!

mariusbutuc on 7 Jan 2016

Do I need something special to make this work $('.mdl-layout').MaterialLayout.toggleDrawer()? If I call this I get Uncaught TypeError: Cannot read property 'toggleDrawer' of undefined(…).

I am using version 1.1.3, hosted via google (as described here: http://www.getmdl.io/started/):

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

with a basic body structure

<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <!-- header -->
    </header>
    <div class="mdl-layout__drawer">
      <!-- drawer -->
    </div>
    <main class="mdl-layout__content">
     <!-- main content -->
    </main>
  </div>
</body>

joshy on 15 Apr 2016

👍1

document.getElementById('app').MaterialLayout.toggleDrawer()

Where app was the id of my .mdl-layout container.

runningrandall on 16 Feb 2017

👍5

Do I need something special to make this work $('.mdl-layout').MaterialLayout.toggleDrawer()? If I call this I get Uncaught TypeError: Cannot read property 'toggleDrawer' of undefined(…).

I am using version 1.1.3, hosted via google (as described here: http://www.getmdl.io/started/):
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
with a basic body structure
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      
    </header>
    <div class="mdl-layout__drawer">
      
    </div>
    <main class="mdl-layout__content">
     
    </main>
  </div>
</body>

Did you manage to solve this?