使用 Material Design lite 显示汉堡菜单的问题答案

【问题标题】：Issue displaying hamburger menu using material design lite使用 Material Design lite 显示汉堡菜单的问题
【发布时间】：2016-08-16 04:54:54
【问题描述】：

我一直在寻找有关如何使用 Material Design lite css 框架显示汉堡包图标的答案。我阅读了我的类似问题并尝试了答案，但对我来说没有运气。如果有人知道并使用过这个框架，请帮助我。

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>

【问题讨论】：

Material 设计（通常）不使用汉堡图标。更常见的是垂直椭圆。请参阅文档的Menus section。如果你想使用抽屉布局，Layouts section 中有文档。
@StephenThomas，这就是我的意思。使用抽屉布局时的图标。它没有出现。
您的 sn-p 中没有足够的信息可以说。您是否包括样式表（包括图标）？ javascript正在运行吗？为什么不使用最新版本？等查看 mdl 文档以正确使用
是的，所有样式表和脚本都包括在内。我用的是cdn。无论如何，谢谢你的时间。

标签： jquery html css material-design

【解决方案1】：

尝试在移动模式下打开。它会出现。如果您真的想在浏览器模式下使用汉堡图标，请尝试使用其他布局，例如 MDL 中的 Fixed header。

另外请检查您是否包含。

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

加载图标

【讨论】：