| <style> |
| /* Ugly CSS! Only for demo. */ |
| |
| #demo-drawer-accordion { |
| height: 100%; |
| } |
| |
| #demo-drawer-accordion .mdlext-accordion__tab { |
| height: 64px; |
| min-height: 64px; |
| min-width: 64px; |
| padding-left: 16px; |
| } |
| |
| .is-small-screen #demo-drawer-accordion .mdlext-accordion__tab { |
| height: 56px; |
| min-height: 56px; |
| min-width: 56px; |
| } |
| |
| #demo-drawer-accordion .mdlext-accordion__tabpanel, |
| #demo-drawer-accordion .mdlext-accordion__tabpanel nav { |
| padding: 0; |
| } |
| |
| #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link { |
| color: rgba(255, 255, 255, 0.87); |
| } |
| |
| #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link:hover { |
| background-color: #212121; |
| } |
| |
| </style> |
| |
| |
| <aside class="mdl-layout__drawer"> |
| |
| <ul id="demo-drawer-accordion" |
| class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-dark-color-theme" |
| aria-multiselectable="false"> |
| |
| <li class="mdlext-accordion__panel"> |
| <header class="mdlext-accordion__tab" aria-expanded="true"> |
| <span class="mdlext-accordion__tab__caption">MDL Extensions</span> |
| <i class="mdlext-aria-toggle-material-icons"></i> |
| </header> |
| <section class="mdlext-accordion__tabpanel"> |
| <nav class="mdl-navigation"> |
| <a class="mdl-navigation__link" href="accordion.html">Accordion</a> |
| <a class="mdl-navigation__link" href="bordered-fields.html">Bordered Fields</a> |
| <a class="mdl-navigation__link" href="collapsible.html">Collapsible</a> |
| <a class="mdl-navigation__link" href="color-themes.html">Color Themes</a> |
| <a class="mdl-navigation__link" href="formatfield.html">Formatted Fields</a> |
| <a class="mdl-navigation__link" href="grid.html">Grid</a> |
| <a class="mdl-navigation__link" href="carousel.html">Image Carousel</a> |
| <a class="mdl-navigation__link" href="lightboard.html">Lightboard</a> |
| <a class="mdl-navigation__link" href="lightbox.html">Lightbox</a> |
| <a class="mdl-navigation__link" href="menu-button.html">Menu Button</a> |
| <a class="mdl-navigation__link" href="selectfield.html">Selectfield</a> |
| </nav> |
| </section> |
| </li> |
| <li class="mdlext-accordion__panel"> |
| <header class="mdlext-accordion__tab"> |
| <span class="mdlext-accordion__tab__caption">Sticky headers</span> |
| <i class="mdlext-aria-toggle-material-icons"></i> |
| </header> |
| <section class="mdlext-accordion__tabpanel"> |
| <nav class="mdl-navigation"> |
| <a class="mdl-navigation__link" href="sticky-header.html">Sticky Header I</a> |
| <a class="mdl-navigation__link" href="sticky-header-ii.html">Sticky Header II</a> |
| <a class="mdl-navigation__link" href="sticky-header-iii.html">Sticky Header III</a> |
| <a class="mdl-navigation__link" href="sticky-header-iv.html">Sticky Header IV</a> |
| <a class="mdl-navigation__link" href="sticky-header-v.html">Sticky Header V</a> |
| <a class="mdl-navigation__link" href="sticky-header-vi.html">Sticky Header VI</a> |
| </nav> |
| </section> |
| </li> |
| </ul> |
| </aside> |