Навигация по материалам Lite

Как я могу создавать элементы подменю в навигации?

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

Я не могу использовать <ul> <li> с ним. Каков правильный класс?

Ответы

Ответ 1

MDL, похоже, пока еще не поддерживает подменю. Однако существуют классы для меню, которые вы можете использовать в качестве подменю:

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

Итак, в вашем коде вы можете выглядеть так:

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

Убедитесь, что у вас есть # внутри вашего href.

Ответ 2

если вы также используете angular.js:

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

если вы не используете angular.js, но классический jquery, вы можете сделать это следующим образом:

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