Materialize Floating Action Button
Materialize floating action button is a circular icon button that will appear after hover.It consists of multiple actions that is associated with the floating action buttons.
Follow the following steps to create Materialize floating action buttons.
Step:1 Add the .fixed-action-btn class to the floating action container.
Floating Action Button Container
<div class="fixed-action-btn"></div>
Step:2 Create floating action trigger button inside the floating container by using .btn-floating.
Trigger Button
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
</div>
Step:3 Create unordered list inside the floating container and assign .btn-floating class to the every linked item i.e <a> element and place it inside unordered list item i.e <li>.
Unordered List
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li>
<a class="btn-floating red">
<i class="material-icons">insert_chart</i>
</a>
</li>
</ul>
</div>
Step:4 Now initialize the floating action buttion through Javascript or jQuery.
Initialization
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.fixed-action-btn').floatingActionButton();
});
Source Code
<div style="position: relative; height: 180px;">
<div class="fixed-action-btn" style="position: absolute; display: inline-block; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul id="nav-mobile">
<li>
<a class="btn-floating red">
<i class="material-icons">insert_chart</i>
</a>
</li>
<li>
<a class="btn-floating yellow darken-1">
<i class="material-icons">format_quote</i>
</a>
</li>
<li>
<a class="btn-floating green">
<i class="material-icons">publish</i>
</a>
</li>
<li>
<a class="btn-floating blue">
<i class="material-icons">attach_file</i>
</a>
</li>
</ul>
</div>
</div>
Horizontal FAB
To create horizontal fab, only set the direction option to left in the Javascript or jQuery initialization.
Initialization
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
direction: 'left'
});
});
Source Code
<div style="position: relative; height: 180px;">
<div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul id="nav-mobile">
<li>
<a class="btn-floating red">
<i class="material-icons">insert_chart</i>
</a>
</li>
<li>
<a class="btn-floating yellow darken-1">
<i class="material-icons">format_quote</i>
</a>
</li>
<li>
<a class="btn-floating green">
<i class="material-icons">publish</i>
</a>
</li>
<li>
<a class="btn-floating blue">
<i class="material-icons">attach_file</i>
</a>
</li>
</ul>
</div>
</div>
Click-only FAB
If you want to open the floating button after click rather than hover then add click-to-toggle class to the FAB.
Initialization
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
direction: 'left',
hoverEnabled: false
});
});
Source Code
<div style="position: relative; height: 190px;">
<div class="fixed-action-btn click-to-toggle" style="position: absolute; right: 24px;">
<a class="btn-floating btn-large red">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile">
<li>
<a class="btn-floating red">
<i class="material-icons">insert_chart</i>
</a>
</li>
<li>
<a class="btn-floating yellow darken-1">
<i class="material-icons">format_quote</i>
</a>
</li>
<li>
<a class="btn-floating green">
<i class="material-icons">publish</i>
</a>
</li>
<li>
<a class="btn-floating blue">
<i class="material-icons">attach_file</i>
</a>
</li>
</ul>
</div>
</div>
FAB to Toolbar
You can transition your FAB into a toolbar on click by using toolbar class to the FAB.
Initialization
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
toolbarEnabled: true
});
});
// Or with jQuery
$('.fixed-action-btn').floatingActionButton({
toolbarEnabled: true
});
Source Code
<div style="position: relative; height: 180px;">
<div class="fixed-action-btn toolbar" style="position: absolute; display: inline-block; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
Web Tutorials
