Material Design Lite Navigation

Question

Wie kann ich Untermenüpunkte in der Navigation machen?

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

Ich kann <ul> <li> damit nicht verwenden. Was ist die richtige Klasse?

Answer 1

MDL scheint Untermenüs bisher nicht zu unterstützen. jedoch gibt es Klassen für Menüs Sie als Untermenüs verwenden:

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

Also in Ihrem Code, den Sie könnte wie folgt aussehen:

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

Stellen Sie sicher, # in Ihrem href haben .

Answer 2

Wenn Sie ein Beispiel für genau sehen wollen, dass diese http://mdlhut.com/2015/07/creating-navigation-in-material-design-lite/

Answer 3

die „verpackt“ in diesem Artikel sehen, ob Sie auch Angularjs:

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

, wenn Sie verwenden Angularjs nicht , aber klassische jquery, können Sie es auf diese Weise tun:

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