
Yet another jQuery based floating action button plugin which expands a floating button to a horizontal menu bar when toggled.
Inspired by Material Design. Smooth animations based on the velocity.js.
1. Load the Material Icons for the menu icons.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. Load jQuery JavaScript library and the jQuery FAB Button plugin's files in the page.
<link href="css/jquery-fab-button.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="js/jquery-fab-button.js"></script>
3. Create the HTML for the floating action buttons.
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li> <a class="btn-floating bg-indigo"> <i class="material-icons">insert_chart</i> </a> </li> <li> <a class="btn-floating bg-indigo"> <i class="material-icons">format_quote</i> </a> </li> <li> <a class="btn-floating bg-indigo"> <i class="material-icons">publish</i> </a> </li> <li> <a class="btn-floating bg-indigo"> <i class="material-icons">attach_file</i> </a> </li> </ul> </div>
This awesome jQuery plugin is developed by smachs. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 07.01.2019
- Source