使用材料設計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>

來源

2016-04-22 claudios

材質設計不（通常）使用一個漢堡包圖標。更常見的是垂直橢圓。請參閱文檔的[菜單部分]（https://getmdl.io/components/index.html#menus-section）。如果您想使用抽屜佈局，請參閱[佈局部分]（https://getmdl.io/components/index.html#layout-section/layout）中的文檔。 –

@StephenThomas，這就是我的意思。使用抽屜佈局時的圖標。它沒有出現。 – claudios

沒有足夠的信息在您的片段中說。你是否包括樣式表（包括圖標）？是運行的JavaScript？爲什麼不使用最新版本？等等。查看mdl文檔以便正確使用 –

嘗試打開移動模式。它會出現。如果您確實想要瀏覽器模式下的漢堡包圖標，請嘗試使用其他佈局，例如來自MDL的固定標頭。

也請檢查您是否包括在內。

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

其中加載圖標

來源

2017-01-22 07:52:48

使用材料設計Lite顯示漢堡包菜單的問題

回答

相關問題