Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MaterializeCSS - How to close the mobile menu

I use the framework CSS Materialize, but I have a problem. How can I close the left-mobile-menu when I click in a link ? By default the menu closes only when you click outside the menu. So I tried with the fonction removeMenu() but it doesn't work. Anyone has a solution ? This is my menu :

<div class="navbar-fixed">
      <nav class="orange darken-4" role="navigation">
        <div class="nav-wrapper container">
          <a id="logo-container"  class="brand-logo"><img id="class" src="img/logo.png" class="nav_logo"></a>
          <ul class="right hide-on-med-and-down">
            <li><a>test</a></li>
            <li ><a>test2</a></li>
          </ul>

          <ul id="nav-mobile" class="side-nav">
            <li><a>test</a></li>
            <li><a>test2</a></li>
          </ul>
          <a href="#" data-activates="nav-mobile" class="button-collapse" id="burger_menu"><i class="material-icons">menu</i></a>
        </div>
      </nav>
    </div>
like image 375
Pim Avatar asked Dec 02 '22 14:12

Pim


1 Answers

Add closeOnClick

// Initialize collapse button
$('.button-collapse').sideNav({
    menuWidth: 300, // Default is 240
    edge: 'left', // Choose the horizontal origin
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
  }
);
like image 70
Raphael MB Avatar answered Dec 27 '22 06:12

Raphael MB