2016-04-27 74 views
2

如何始终在导航栏materializecss上显示菜单图标?就像点击时,抽屉出现并隐藏反之亦然。始终在materializecss中显示汉堡包菜单

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 
    } 
); 

回答

6

在行,

<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>,增加一个班.show-on-large

jsfiddle

欲了解更多信息:Full Screen HTML Structure

+2

谢谢!这回答了这个问题。 – claudios

+1

不客气。 :) –