Problem Anzeige von Hamburger-Menü mit Material-Design-Lite

Ich habe nach einer Antwort auf, wie das Hamburger-Symbol mit Material Design-Lite CSS-Framework anzuzeigen. Ich las ähnliche Fragen und versuchte die Antworten, aber kein Glück für mich. Wenn jemand diesen Rahmen kennt und benutzt, dann hilf mir bitte.Problem Anzeige von Hamburger-Menü mit Material-Design-Lite

HTML: Startseite

</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>

Quelle

2016-04-22 claudios

Materialdesign nicht (in der Regel) ein Hamburgeres Symbol verwenden. Häufiger wären die vertikalen Ellipsen. Weitere Informationen finden Sie im Abschnitt [Menüs] (https://getmdl.io/components/index.html#menus-section) der Dokumentation. Wenn Sie ein Schubladenlayout verwenden möchten, finden Sie im Abschnitt [Layouts] eine Dokumentation (https://getmdl.io/components/index.html#layout-section/layout). –

@StephenThomas, das ist was ich meine. Das Symbol bei Verwendung eines Schubladenlayouts. Es erscheint nicht. – claudios

nicht genug Informationen in Ihrem Snippet zu sagen. enthalten Sie das Stylesheet (einschließlich der Symbole)? läuft das Javascript? Warum nicht die neueste Version verwenden? etc. Überprüfen Sie die MDL-Dokumentation für die ordnungsgemäße Verwendung –

Versuchen Öffnung im Mobil-Modus. Es wird angezeigt. Wenn Sie wirklich Hamburger Symbol im Browser-Modus wollen, versuchen Sie es mit anderen Layouts wie feste Kopfzeile von MDL.

und auch bitte überprüfen, ob Sie enthalten sind.

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

, die die Symbole laden

Quelle

2017-01-22 07:52:48

Problem Anzeige von Hamburger-Menü mit Material-Design-Lite

Antwort

Verwandte Themen