使用材料设计Lite显示汉堡包菜单的问题

我一直在寻找一个关于如何使用材料设计Lite CSS框架来显示汉堡包图标的答案。我读了类似的问题，并尝试了答案，但对我来说却没有运气。如果有人知道并且在使用这个框架之前请好心帮助我。使用材料设计Lite显示汉堡包菜单的问题

HTML：首页

</head> 
<body> 
<div class="mdl-layout mdl-js-layout"> 
    <header class="mdl-layout__header"> 
    <div class="mdl-layout__header-row"> 
     <span class="mdl-layout-title">Title</span> 
     <div class="mdl-layout-spacer"></div> 
     <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="#">Home</a> 
     <a class="mdl-navigation__link" href="#">About</a> 
     <a class="mdl-navigation__link" href="#">Contact</a> 
     </nav> 
    </div> 
    </header> 

    <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title"> 
    Foo 
     </span> 
     <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="">BAR</a> 
     <a class="mdl-navigation__link" href="">BAR</a> 
     <a class="mdl-navigation__link" href="">BAR</a> 
     <a class="mdl-navigation__link" href="">BAR</a> 
     </nav> 
    </div> 
    </div> 
</div> 
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> 
<script> 
componentHandler.upgradeDom(); //code taken from other answers but nothin happen 
</script> 
</body> 
</html>

来源

2016-04-22 claudios

材质设计不（通常）使用一个汉堡包图标。更常见的是垂直椭圆。请参阅文档的[菜单部分]（https://getmdl.io/components/index.html#menus-section）。如果您想使用抽屉布局，请参阅[布局部分]（https://getmdl.io/components/index.html#layout-section/layout）中的文档。 –

@StephenThomas，这就是我的意思。使用抽屉布局时的图标。它没有出现。 – claudios

没有足够的信息在您的片段中说。你是否包括样式表（包括图标）？是运行的JavaScript？为什么不使用最新版本？等等。查看mdl文档以便正确使用 –

尝试打开移动模式。它会出现。如果您确实想要浏览器模式下的汉堡包图标，请尝试使用其他布局，例如来自MDL的固定标头。

也请检查您是否包括在内。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?   family=Material+Icons">

其中加载图标

来源

2017-01-22 07:52:48

使用材料设计Lite显示汉堡包菜单的问题

回答

相关问题