floating-action

Float action

This custom element will create a floating action button. When hover over the element it will reveal the hidden menu. This is a touch event on touch devices

Demo

Demo

Install

Install the component using NPM:

$ npm install floating-action --save

Dependencies

Custom element polyfill

https://github.com/WebReflection/document-register-element

classList polyfill

https://www.npmjs.com/package/classlist

Usage

Add Custom Element Script:

<script src="../dist/float-action.js"></script>

Start using it!

<cs-floatingaction button=".c-floating__button" container=".c-floating__nav" toggle="c-floating__nav--show" move-element="c-floating--offbottom" to-bottom="10">

    <nav class="c-floating__nav">
        <a href="" class="c-floating__link">
            <span class="glyphicon glyphicon-eye-open"></span> View reminders
        </a>
        <a href="" class="c-floating__link">
            <span class="glyphicon glyphicon-calendar"></span> Create reminder
        </a>
    </nav>

    <a href="" class="c-floating__button">
        <i class="material-icons md-36 c-floating__icon">add</i>
    </a>

</cs-floatingaction>

Options

Attribute	Options	Default	Description
button	Css Selector	null	This is required. Its the class on the icon that is allow aways visible.
container	Css Selector	null	This is required. Its the container that is hidden containing the links
toggle	String	null	This is required. This is the name of the class that needs to be added to display the container
move-element	String	null	If required to move the custom element of the bottom of the window. This is the class that will be added or remove when scroll off the bottom on the window
to-bottom	String	0	How far from the bottom of the window should the 'move-element' class be added or removed