star Bemat Admin Exclusive Premium Plugin
The Speed Dial component inspired by Google Inbox allows for a small number of items to animate out from a floating action button (FAB). The floating action button can fling out related actions upon press.
FAB Speed Dial
You may supply a direction of left, up, down or right through the data-direction attribute, and an animation mode of fling or scale through the data-mode attribute.
Examples:
Direction
Open/Closed
Animation Modes
HTML Code:
<div class="md-fab-speed-dial" data-toggle="speed-dial" data-mode="fling"> <div class="md-fab-trigger" aria-expanded="false" aria-haspopup="true"> <button type="button" class="btn btn-floating-action btn-info"><i class="material-icons">menu</i></button> </div> <ul class="md-fab-actions" aria-hidden="true"> <li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"data-toggle="tooltip" data-placement="left" title="Tooltip here"><i class="material-icons">3d_rotation</i></a></li> <li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">attach_file</i></a></li> <li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">backup</i></a></li> <li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">brush</i></a></li> <li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">pageview</i></a></li> <li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">send</i></a></li> </ul> </div>