Material Floating Toggle Menu Plugin With jQuery - collapzion.js

File Size: 18.7 KB
Views Total: 13610
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Material Floating Toggle Menu Plugin With jQuery - collapzion.js

collapzion.js is a simple, lightweight jQuery plugin for creating a Material Design inspired floating navigation button on the webpage. When pressed, it may contain more related menu links.

See also:

How to use it:

1. Load the Material Icons for the floating navigation.

<link href="//" rel="stylesheet">

2. Load jQuery library and the jQuery collapzion.js plugin's files in the html page.

<link rel="stylesheet" href="collapzion.min.css">
<script src="jquery.min.js"></script>
<script src="collapzion.min.js"></script>

3. Create a placeholder element for the floating navigation.

<div id="btncollapzion" class=" btn_collapzion"></div>

4. Initialize the plugin and insert menu urls, icons, text to the floating navigation as this:

      'label':'Menu 1',
    'label':'Menu 2',
    'label':'Menu 3',

5. Set the navigation colors:


6. Re-position the floating navigation button.

  _pos: {
    'left': '-20px',
    'bottom': '-25px',
    'padding': '0px 8px',

This awesome jQuery plugin is developed by channasmcs. For more Advanced Usages, please check the demo page or visit the official website.