使用材料设计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>
答
尝试打开移动模式。它会出现。 如果您确实想要浏览器模式下的汉堡包图标,请尝试使用其他布局,例如来自MDL的固定标头。
也请检查您是否包括在内。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon? family=Material+Icons">
其中加载图标
材质设计不(通常)使用一个汉堡包图标。更常见的是垂直椭圆。请参阅文档的[菜单部分](https://getmdl.io/components/index.html#menus-section)。如果您想使用抽屉布局,请参阅[布局部分](https://getmdl.io/components/index.html#layout-section/layout)中的文档。 –
@StephenThomas,这就是我的意思。使用抽屉布局时的图标。它没有出现。 – claudios
没有足够的信息在您的片段中说。你是否包括样式表(包括图标)?是运行的JavaScript?为什么不使用最新版本?等等。查看mdl文档以便正确使用 –