Skip to content

🎨 Floating action button extracted from materializecss to those who want speed and flexibility without adhering to the complete materializecss framework.

Notifications You must be signed in to change notification settings

smachs/jquery-fab-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jQuery FAB Button

A small module for jQuery and Javascript based in MaterializeCSS one day I was looking for some alternative to floating action buttons but with no result and the floating action buttons that I thought were either incomplete or not feasible I remembered that I used MaterializeCSS and I decided to adapt only the floating action button to be used separately from framework.

Resources

Table of Resources

Getting Started

  1. Clone the repository using url
$ git clone https://github.com/smachs/jquery-fab-button

CDN

  1. Copy all dependencies from directory
$ cd /js or /css
  1. Add to your template
<!-- Add in HEAD -- >
<link href="../css/jquery-fab-button.css" rel="stylesheet">
<!-- Add After BODY -- >
<script src="../jss/jquery-fab-button.min.js"></script>
  1. Change to color you want
<li>
    <a id="first-fab" class="btn-floating" data-fabcolor="#YourHEX">
        <i class="material-icons">insert_chart</i>
    </a>
</li>
  1. Add FAB to your template
<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 id="first-fab" class="btn-floating" data-fabcolor="#45d1ff">
                <i class="material-icons">insert_chart</i>
            </a>
        </li>
        <li>
            <a id="second-fab" class="btn-floating" data-fabcolor="#7345ff">
                <i class="material-icons">format_quote</i>
            </a>
        </li>
        <li>
            <a id="third-fab" class="btn-floating" data-fabcolor="#0084ff">
                <i class="material-icons">publish</i>
            </a>
        </li>
        <li>
            <a id="fourth-fab" class="btn-floating" data-fabcolor="#ff7345">
                <i class="material-icons">attach_file</i>
            </a>
        </li>
    </ul>
</div>

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label 😋

About

🎨 Floating action button extracted from materializecss to those who want speed and flexibility without adhering to the complete materializecss framework.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published