javascript - Always show hamburger menu in materializecss - Stack Overflow

admin管理员组

文章数量:1302360

How can I always display the menu icon on navbar materializecss? Like when clicked, the drawer appears and hides vice versa.

Html:

<nav class="default" role="navigation">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Brand</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Login</a></li>
        <li><a class="waves-effect red waves-light btn">Sign up</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign up</a></li>
      </ul>
    </div>
  </nav>

JS:

$('.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
    }
  );

How can I always display the menu icon on navbar materializecss? Like when clicked, the drawer appears and hides vice versa.

Html:

<nav class="default" role="navigation">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Brand</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Login</a></li>
        <li><a class="waves-effect red waves-light btn">Sign up</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign up</a></li>
      </ul>
    </div>
  </nav>

JS:

$('.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
    }
  );

• javascript
• jquery
• html
• css
• materialize

Share Improve this question Follow asked Apr 27, 2016 at 2:39 claudiosclaudios 6,65688 gold badges5050 silver badges9797 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

At line,

<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>, add one more class .show-on-large.

jsfiddle

For more info : Full Screen HTML Structure

本文标签： javascriptAlways show hamburger menu in materializecssStack Overflow