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:

• Material Design Floating Action Button with jQuery - KC FAB
• Floating Draggable Popup Menu With jQuery And Animate.js

How to use it:

1. Load the Material Icons for the floating navigation.

<link href="//fonts.googleapis.com/icon?family=Material+Icons" 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:

$('#btncollapzion').Collapzion({
  _child_attribute:[
    {
      'label':'Menu 1',
      'url':'#',
      'icon':''
    },
    {
    'label':'Menu 2',
    'url':'#',
    'icon':''
    },
    {
    'label':'Menu 3',
    'url':'#',
    'icon':''
    },
  ]
});

5. Set the navigation colors:

$('#btncollapzion').Collapzion({
  _main_btn_color:'#4285f4;',
  _child_btn_color:'#f4645f;',
});

6. Re-position the floating navigation button.

$('#btncollapzion').Collapzion({
  _pos: {
    'width':'100%',
    'min-height':'20%',
    'position':'fixed',
    'right':'0',
    'left': '-20px',
    'bottom': '-25px',
    'text-align':'center',
    'padding': '0px 8px',
    'display':'block',
    'margin-bottom':'34px'
  },
});

---

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