Question

我一直在寻找如何使用材料设计精简版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>

Answer 1

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

并请检查您是否已包含。

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

加载图标

使用材料设计精简版显示汉堡菜单的问题

1 个答案: