Material design lite 材料设计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>

---

我不能用它。正确的课程是什么

MDL似乎还不支持本地子菜单。 但是有一些菜单类可以用作子菜单：

因此，在您的代码中，您可能如下所示：

<!-- 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中有#

如果同时使用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>

子链接1
子链接2
$（文档）.ready（函数（）{
$（“#mainlink”）。单击（函数（）{
$（“#子菜单”）。切换（“显示”）；
});
});

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