Make Floating toggle menu with Collapzion.js

Collapzion.js is a lightweight jQuery plugin that adds a floating material designed toggle button on the webpage.

The button contains some child items with its own actions which will show and hide when clicking on the toggle button.

In this tutorial, I show how you can create a floating toggle menu using Collapzion.js.

Download and Include
Initialize
Options
Conclusion

1. Download and Include

Download the library from GitHub.
Include collapzion.min.js and collapzion.min.css script with the jQuery library. Also, require to include Material icon fonts.

<link rel="stylesheet" href="collapzion.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="collapzion.min.js"></script>

2. Initialize

Create a <div > element and call Collapzion() method on it.

Example

<!-- CSS -->  
<link rel="stylesheet" href="collapzion.min.css">    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Script -->    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script type="text/javascript" src="collapzion.min.js"></script> 
<script type="text/javascript"> 
jQuery(function($){         
  $('#mydiv').Collapzion(); 
}); 
</script>

<div id='mydiv' ></div>

3. Options

It has 3 options –

_main_btn_color – This sets the Main button color. The default value is #2f353e;.
_child_btn_color – This set the child button color which shows after click on the Main button. The default value is #2f353e;.
_child_attribute – Defines the child buttons. It allows specifying the label, url, and icon. The default post child is set.

_child_attribute:[{
 'label':'Post',
 'url':'/',
 'icon':'&#xE150;'
}]

NOTE – You can find Google material icons from here.

_pos – This defines the CSS of the initialize element.

_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'
 }

Example

<!-- CSS -->
<link rel="stylesheet" href="collapzion.min.css">    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script type="text/javascript" src="collapzion.min.js"></script> 
<script type="text/javascript"> 
jQuery(function($){         
  $('#mydiv').Collapzion({            
    _child_attribute:[{                  
       'label':'Add',                  
       'url':'#',                  
       'icon':'&#xE145;'               
     },               
     {              
       'label':'Edit',              
       'url':'#',              
       'icon':'&#xE3C9;'               
     },               
     {              
       'label':'Delete',              
       'url':'#',              
       'icon':'&#xE872;'               
     }       
     ],           
     _main_btn_color:'#bae755;',           
     _child_btn_color:'#56ca4a;',        
   }); 
}); 
</script>

<div id='mydiv'  ></div>

Demo

Click on the + button.

4. Conclusion

This plugin has a few options which you can use to customize the default functionality. If you want to add more than one floating menu using collapzion.js then you need to declare them separately on your page.

If you found this tutorial helpful then don't forget to share.

Contents

1. Download and Include

2. Initialize

3. Options

4. Conclusion