Material 设计精简版导航

Question

如何在导航中制作子菜单项？

<!-- 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>。什么是正确的class？

Answer 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 中包含 #。

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

Material 设计精简版导航

Material Design Lite navigation

material-design-lite