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.

Make Floating toggle menu with Collapzion.js


Contents

  1. Download and Include
  2. Initialize
  3. Options
  4. 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 declare them separately on your page.

Related Post

Spread the love

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *