Material Design Lite navigation

Question

Come posso creare voci di sottomenu nella navigazione?

<!-- Navigation --> 
    <nav class="mdl-navigation"> 
    <a class="mdl-navigation__link" href="">Link</a> 
    <a class="mdl-navigation__link" href="">Link</a> 
    <a class="mdl-navigation__link" href="">Link</a> 
    <a class="mdl-navigation__link" href="">Link</a> 
    </nav> 

Non riesco a utilizzare <ul> <li> con esso. Qual è la classe corretta?

Answer 1

MDL non sembra ancora supportare i sottomenu in modo nativo. Tuttavia Ci sono classi per i menu è possibile utilizzare come sub menu:

http://www.getmdl.io/components/index.html#menus-section

Quindi nel tuo codice che potrebbe assomigliare a questo:

<!-- Left aligned menu below button --> 
<nav class="mdl-navigation"> 
    <a id="submenu" class="mdl-navigation__link" href="#">Link</a> 
    <a class="mdl-navigation__link" href="">Link</a> 
    <a class="mdl-navigation__link" href="">Link</a> 
    <a class="mdl-navigation__link" href="">Link</a> 
</nav> 

<!-- sub menu only visible when clicked on the link above --> 
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
    for="submenu"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
</ul> 

Assicurarsi di avere # all'interno del vostro href .

Answer 2

Se volete vedere un esempio di esattamente questo vedere la sezione "imballato" in questo articolo http://mdlhut.com/2015/07/creating-navigation-in-material-design-lite/

Answer 3

se si utilizza angular.js anche:

<nav class="mdl-navigation"> 
    <!-- link --> 
     <a ng-click="showme = ! showme" class="mdl-navigation__link" href="#">Link</a> 
    <!-- sub menu --> 
     <nav class="mdl-navigation" ng-show="showme"> 
      <a class="mdl-navigation__link">Sublink 1</a> 
      <a class="mdl-navigation__link">Sublink 2</a> 
     </nav> 
</nav> 

se non usare angular.js , ma classico jquery, puoi farlo in questo modo:

<nav class="mdl-navigation"> 
    <!-- link --> 
     <a href="#" id="mainlink" class="mdl-navigation__link">Link</a>  
    <!-- sub menu --> 
     <nav id="submenu" class="mdl-navigation"> 
     <a class="mdl-navigation__link">Sublink 1</a> 
     <a class="mdl-navigation__link">Sublink 2</a> 
     </nav> 
</nav> 

<script> 
    $(document).ready(function() { 
    $("#mainlink").click(function() { 
     $('#submenu').toggle('show'); 
    }); 
    }); 
</script>