Material Design Lite navigation

13
votes

How can I make submenu items in the navigation? 

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

I can't use <ul> <li> with it. What is the correct class?

2
material-design-lite

2 Answers

14
votes

MDL doesn't seem to support sub menus natively just yet. However there are classes for menus you can use as sub menus:

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

So in your code you might look like this: 

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

Make sure to have # inside your href.

2
votes

if you use also 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>

if you dont use angular.js, but classic jquery, you can do it in that way:

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