A quick dropdown system to be used with Material Design Lite.
WARNING: This is still very early.
- Reference
src/dropdown.jsin your markup so it will be included as a script. - Build MDL's Sass and add
src/dropdown.scssafter the rest of MDL.
- Code an anchor to be the trigger for the dropdown. Give it the
component-js-dropdownclass to setup the dropdown menu. Also provided is adropdown-navigation__headerclass that styles it like a normal menu item.
<a class="dropdown-navigation__header component-js-dropdown" title="Gaming">
Gaming
</a>- Add the arrow icons within the header. These will be displayed so users know the dropdown's state.
<a class="dropdown-navigation__header component-js-dropdown" title="Gaming">
Gaming
<span class="material-icons dropdown-inactive">arrow_drop_down</span>
<span class="material-icons dropdown-active ">arrow_drop_up</span>
</a>- The next child in the DOM should be menu this trigger will target. This element contains the anchors for the menu.
<div class="dropdown-navigation__menu">
<a class="mdl-navigation__link" href="gaming/mtg" title="Magic: The Gathering">Magic: the Gathering</a>
<a class="mdl-navigation__link" href="gaming/dnd" title="Dungeons & Dragons">Dungeons & Dragons</a>
</div>Final code:
<a class="dropdown-navigation__header component-js-dropdown" title="Gaming">Gaming</a>
<div class="dropdown-navigation__menu">
<a class="mdl-navigation__link" href="gaming/mtg" title="Magic: The Gathering">Magic: the Gathering</a>
<a class="mdl-navigation__link" href="gaming/dnd" title="Dungeons & Dragons">Dungeons & Dragons</a>
</div>