This time I will share jQuery Plugin and tutorial about Material Floating Menu With Action Buttons – jQuery FAB Button, hope it will help you in programming stack.
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.
How to use it:
1. Load the Material Icons for the menu icons.
2. Load jQuery JavaScript library and the jQuery FAB Button plugin’s files in the page.
1 |
< link href = "css/jquery-fab-button.css" rel = "stylesheet" > |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "js/jquery-fab-button.js" ></ script > |
3. Create the HTML for the floating action buttons.
01 |
< div class = "fixed-action-btn horizontal" style = "bottom: 45px; right: 24px;" > |
02 |
< a class = "btn-floating btn-large red" > |
03 |
< i class = "large material-icons" >mode_edit</ i > |
07 |
< a class = "btn-floating bg-indigo" > |
08 |
< i class = "material-icons" >insert_chart</ i > |
12 |
< a class = "btn-floating bg-indigo" > |
13 |
< i class = "material-icons" >format_quote</ i > |
17 |
< a class = "btn-floating bg-indigo" > |
18 |
< i class = "material-icons" >publish</ i > |
22 |
< a class = "btn-floating bg-indigo" > |
23 |
< i class = "material-icons" >attach_file</ i > |
Changelog:
2020-11-21