https://www.tumomo.com/js/Floating_Menu/collapzion.js?1060

1/*
2
3 ___      _ _                _                _     
4  / __\___ | | | __ _ _ __ ___(_) ___  _ __    (_)___ 
5 / /  / _ \| | |/ _` | '_ \_  / |/ _ \| '_ \   | / __|
6/ /__| (_) | | | (_| | |_) / /| | (_) | | | |_ | \__ \
7\____/\___/|_|_|\__,_| .__/___|_|\___/|_| |_(_)/ |___/
8                     |_|                     |__/     
9
10 Version: 1.0.0
11  Author: channa bandara
12 Website:
13    Repo: http://github.com/channasmcs
14
15 */
16(function($) {
17    "use strict";
18    $.fn.Collapzion = function(options) {
19        // Private Functions
20        function debug(e) {
21            console.log(e);
22        }        
23        // Global Private Variables
24        var _base = this;
25        var _settings = $.extend({
26            _pos: {
27                'position':'fixed',
28                'right':'0px',
29                'bottom': '50px',
30                'text-align':'center',
31                'padding': '0px 1px 0px 0px',
32                'display':'block',
33                'margin-bottom':'5px',
34                'z-index': '99999998'
35            },
36            _child_attribute:[
37                {
38                'label':'Post',
39                'url':'/',
40                'icon':''
41                }
42            ],
43            _main_btn_color: '#2f353e;',
44            _child_btn_color: '#2f353e;'
45        }, options );
46
47        _base.init = function(){
48            _base.css(_settings._pos);
49            _base.append('<a style="background-color:'+_settings._main_btn_color+'" id="menu_close_movil" href="javascript:void(0)" class="_col_shadow _collapz_parant _close" title="Menú de Navegación"></a>');
50             
51            $('#'+this.attr('id')+ ' a._collapz_parant').on('click',function(){
52                var ths = $(this);                
53                _base.collapz_btn(ths, _settings._child_attribute);
54                Deshabilitar_Elemento();
55                Deshabilitar_Elemento_quicksearch();
56            });
57        };
58        // toggle button 
59        _base.collapz_btn = function(_element, child_attribute){
60            if(_element.hasClass('_close')){
61                
62                _element.css({
63                    '-webkit-transform': 'rotate(45deg)',
64                    '-moz-transform': 'rotate(45deg)',
65                    'transform': 'rotate(45deg)'
66                });
67                _element.removeClass('_close');
68                _element.addClass('_open');
69                 document.getElementById("overlay_menu").style.display = "block";               
70                var _child_el = '<ul class="_child_collapzion">';                
71                    jQuery.each(child_attribute, function( i, val ) {
72                        _child_el += '<li id="'+val.ID_element+'"><span class="_title ">'+val.label+'</span><a href="'+val.url+'" class="_col_shadow _collapz_child edit" style="background-color:'+val.bg_color+';background-size:'+val.bg_size+';background-repeat:'+val.bg_repeat+';background-position:'+val.bg_position+'; color:'+val.font_color+'!important;background-image:url('+val.bg_image+')" target="'+val.target_window+'"><i class="material-icons">'+val.icon+'</i></a></li>';                 
73                    });
74                _child_el += '</ul>';
75               
76                _element.parent().append(_child_el);
77                $("._child_collapzion" ).css( {'transform':'translate3d(0, -100%, 0)'} );
78
79            } else {
80                $("._child_collapzion" ).css( {'transform':'translate3d(0, 0%, 0)'} );
81                $(this).parent().find('ul._child_collapzion').remove();
82                _element.css({
83                    '-webkit-transform': 'rotate(0deg)',
84                    '-moz-transform': 'rotate(0deg)',
85                    'transform': 'rotate(0deg)'
86                });
87                _element.removeClass('_open');
88                document.getElementById("overlay_menu").style.display = "none";
89                _element.addClass('_close');                
90            }          
91        };
92        _base.clicker = function(e) {
93            debug(e);
94        };
95        _base.init();
96    };
97    
98    $.fn.Collapzion_Desktop = function(options) {
99        // Private Functions
100        function debug(e) {
101            console.log(e);
102        }        
103        // Global Private Variables
104        var _base2 = this;
105        var _settings2 = $.extend({
106            _pos2: {
107                'width':'100%',
108                'position':'fixed',
109                'right':'0px',
110                'bottom': '31%',
111                'text-align':'center',
112                'padding': '0px 1px 0px 0px',
113                'display':'block',
114                'margin-bottom':'5px',
115                'z-index': '99999998'
116            },
117            _child2_attribute:[
118                {
119                'label':'Post',
120                'url':'/',
121                'icon':'&#xe241;'
122                }
123            ],
124            _main2_btn_color: '#2f353e;',
125            _child2_btn_color: '#2f353e;'
126        }, options );
127
128        _base2.init = function(child2_attribute){
129            _base2.css(_settings2._pos2);
130            var _child2_el = '<ul class="_child_collapzion" style="transform: translate3d(0px, -100%, 0px);">\n\
131<li id="id_01">\n\
132<span id="titulo_01_menu_flotante" class="_title ">Autos y Vehículos</span>\n\
133<a id="boton_01_menu_flotante" href="autos-y-vehiculos-b428-es.html" class="_col_shadow _collapz_child edit" style="background-color:#f44336;background-size:40px 40px;background-repeat:no-repeat;background-position:center; color:transparent;!important;background-image:url(img/utilities/Cards/car.svg)" target="_self"><i class="material-icons"></i></a></li>\n\
134<li id="id_02">\n\
135<span id="titulo_02_menu_flotante" class="_title ">Inmuebles</span>\n\
136<a id="boton_02_menu_flotante" href="inmuebles-b413-es.html" class="_col_shadow _collapz_child edit" style="background-color:#8bc34a;background-size:40px 40px;background-repeat:no-repeat;background-position:center; color:transparent;!important;background-image:url(img/utilities/Cards/house.svg)" target="_self"><i class="material-icons"></i></a></li>\n\
137<li id="id_03">\n\
138<span id="titulo_03_menu_flotante" class="_title ">Electrónicos</span>\n\
139<a id="boton_03_menu_flotante" href="electronicos-b331-es.html" class="_col_shadow _collapz_child edit" style="background-color:#03a9f4;background-size:40px 40px;background-repeat:no-repeat;background-position:center; color:transparent;!important;background-image:url(img/utilities/Cards/electronics.svg)" target="_self"><i class="material-icons"></i></a></li>\n\
140<li id="id_04">\n\
141<span id="titulo_04_menu_flotante" class="_title ">Todas las categorías</span>\n\
142<a id="boton_04_menu_flotante" href="index.php?page=quick_search&amp;action=q&amp;cid=0&amp;cid=0" class="_col_shadow _collapz_child edit" style="background-color:#2196F3;background-size:40px 40px;background-repeat:no-repeat;background-position:center; color:white!important;background-image:url(undefined)" target="_self"><i class="material-icons"></i></a></li>\n\
143</ul>';
144                   
145            _base2.append(_child2_el);
146
147        };
148       
149        _base2.clicker = function(e) {
150            debug(e);
151        };
152        _base2.init();
153    };  
154
155}(jQuery));