This plugin adds a Speed Dial component to any project using MDL.
MDL doesn't include a Speed Dial component (the FAB-based menu) by default, so this plugin can be used to add that missing element to your project.
## [Demo](http://nesgael.github.io/mdl-speed-dial/)
## How to use it
You can place your speed dial in two different places: at the right-bottom corner of the page and in the edge of the header/navbar.
#### Right-bottom corner placed
Use the `.mdl-speed-dial--bottom-fixed` class.
```html
<div class="mdl-speed-dial mdl-speed-dial--bottom-fixed">
<div class="mdl-speed-dial__options">
<div class="mdl-speed-dial__option">
<p class="mdl-speed-dial__tooltip">Option 3</p>
<a href="#" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">folder</i>
</a>
</div>
<div class="mdl-speed-dial__option">
<p class="mdl-speed-dial__tooltip">Option 2</p>
<a href="#" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">attach_file</i>
</a>
</div>
<div class="mdl-speed-dial__option">
<p class="mdl-speed-dial__tooltip">Option 1</p>
<a href="#" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">email</i>
</a>
</div>
</div>
<!-- Be sure to put the .mdl-speed-dial__main-fab button after the .mdl-speed-dial__options section -->
<button class="mdl-speed-dial__main-fab mdl-speed-dial__main-fab--spin mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons mdl-speed-dial_main-fab-icon mdl-speed-dial_main-fab-icon--primary">add</i>
<i class="material-icons mdl-speed-dial_main-fab-icon mdl-speed-dial_main-fab-icon--secondary">create</i>
</button>
</div>
```
### Header edge placed
Put the code inside the ```<header>``` element, as a direct child.
Use the `.mdl-speed-dial--header-edge` class.
```html
<div class="mdl-speed-dial mdl-speed-dial--header-edge">
<!-- Be sure to put the .mdl-speed-dial__main-fab button before the .mdl-speed-dial__options section -->
<button class="mdl-speed-dial__main-fab mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons mdl-speed-dial_main-fab-icon">add</i>
</button>
<div class="mdl-speed-dial__options">
<div class="mdl-speed-dial__option">
<p class="mdl-speed-dial__tooltip">Option 1</p>
<a href="#" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">folder</i>
</a>
</div>
<div class="mdl-speed-dial__option">
<p class="mdl-speed-dial__tooltip">Option 2</p>
<a href="#" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">attach_file</i>
</a>
</div>
<div class="mdl-speed-dial__option">
<p class="mdl-speed-dial__tooltip">Option 3</p>
<a href="#" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">create</i>
</a>
</div>
</div>
</div>
```
## Options
<table>
<thead>
<tr>
<th>Modifier Class</th>
<th>Description</th>
</tr>
</head>
<tbody>
<tr>
<td>.mdl-speed-dial--bottom-fixed</td>
<td>Place the speed dial at the right-bottom corner of the page.</td>
</tr>
<tr>
<td>.mdl-speed-dial--header-edge</td>
<td>Place the speed dial at the edge of the header/navbar.</td>
</tr>
<tr>
<td>.mdl-speed-dial__tooltip--hidden</td>
<td>Hide the tooltip of the FAB option element and show it only when hover.</td>
</tr>
<tr>
<td>.mdl-speed-dial__main-fab--spin</td>
<td>Rotate the main FAB when hover.</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric"><code>.mdl-speed-dial_main-fab-icon--primary</code></td>
<td class="mdl-data-table__cell--non-numeric">Use this modifier when you want to switch between two icons when hover and un-hover the main FAB. Add the class to the primary icon (shown on un-hover state) inside the <code>.mdl-speed-dial__main-fab</code> element.</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric"><code>.mdl-speed-dial_main-fab-icon--secondary</code></td>
<td class="mdl-data-table__cell--non-numeric">Use this modifier when you want to switch between two icons when hover and un-hover the main FAB. Add the class to the secondary icon (shown on hover state) inside the <code>.mdl-speed-dial__main-fab</code> element.</td>
</tr>
</tbody>
</table>
You can see examples of the usage of these options in the previous section ("How to use it")
## Dependencies
The only dependency is jQuery (besides MDL).
