Material Lite jsデモを再生することができません。ハンバーガーアイコンが表示されません。

Material Design Liteを使用しているため、最初のテストでは信頼性が低くなっています。私はここに示したデモを再現しようとしています：The first Layout Example。Material Lite jsデモを再生することができません。ハンバーガーアイコンが表示されません。

ハンバーガーアイコン付きメニューヘッダー：です。しかし、私は私のプロジェクトでこれを実装しようとすると、 "タイトル"テキストが、ハンバーガーのアイコンがないヘッダーを取得します。私は間違って何をしていますか？ここで

私のコードです：メニューアイコンの明示的な言及はありません

<head> 
<meta name="mobile-web-app-capable" content="yes"> 
<link rel="icon" sizes="192x192" href="images/android-desktop.png"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css"> 
</head> 
<body> 
<div class="demo-layout-transparent mdl-layout mdl-js-layout"> 
    <header class="mdl-layout__header mdl-layout__header--transparent"> 
    <div class="mdl-layout__header-row"> 
     <!-- Title --> 
     <span class="mdl-layout-title">Title</span> 
    </div> 
    </header> 
    <div class="mdl-layout__drawer"> 
    <span class="mdl-layout-title">Title</span> 
    <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="">Link1</a> 
     <a class="mdl-navigation__link" href="">Link2</a> 
    </nav> 
    </div> 
    <main class="mdl-layout__content"> 
    </main> 
</div> 
</body> 
</html>

と私はドキュメントは、この時点では不明であるが、それが表示されるのデフォルトであるため、それがあると信じて。ここで

は、彼らがこのデモを動作させるために使用するリストのコードです：

<style> 
.demo-layout-transparent { 
    background: url('../assets/demos/transparent.jpg') center/cover; 
} 
.demo-layout-transparent .mdl-layout__header, 
.demo-layout-transparent .mdl-layout__drawer-button { 
    color: white; 
} 
</style> 

<div class="demo-layout-transparent mdl-layout mdl-js-layout"> 
    <header class="mdl-layout__header mdl-layout__header--transparent"> 
    <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="">Link</a> 
     </nav> 
    </div> 
    </header> 
    <div class="mdl-layout__drawer"> 
    <span class="mdl-layout-title">Title</span> 
    <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="">Link</a> 
    </nav> 
    </div> 
    <main class="mdl-layout__content"> 
    </main> 
</div>

出典

2016-10-23 IcedDante

<div class="mdl-layout__drawer-button" 
role="button" aria-expanded="false"> 
    <i class="material-icons">menu</i> 
</div>

は仕事をしたこれら二つのdiv mdl-layout__drawer、mdl-layout__content

出典

2016-10-23 04:28:52 user2301346

の間にこれを追加しますが、なぜ、なぜあなたは説明することができますウェブサイトのデモにはこのコンテンツがありませんか？ありがとうございました！ – IcedDante

http://codepen.io/anon/pen/xErgXJこちらのデモでは、画像の代わりに青色の背景色が1つだけ変更されています。もう一つはJSファイルを上記のコードスニペットに追加することを忘れてしまいます。私が読んだおっとそうではない理由を示したのではなく、コードの重要な部分を見せたいだけです。（あなたがHTMLとCSSを本当に初めて知っていて、そうでなければそれを無視する場合のみ）、あなたはどのブラウザでも要素を調べてHTMLを見ることができます。 https://developers.google.com/web/tools/chrome-devtools/inspect-styles/ – user2301346

Material Lite jsデモを再生することができません。ハンバーガーアイコンが表示されません。

答えて

関連する問題