https://www.fredolsen.es/web/js/vsf-menu.js

1/**
2 * Clase que controla los menus
3 */
4var VsfMenu = Class.extend({
5    options: null,
6    log: function(msg, obj){
7        if(this.options.debug) {
8            console.log("VsfMenu(): " + msg);
9            if (obj !== undefined && obj !== null) {
10                console.log(obj);
11            }
12        }
13    },
14    /**
15     * Muestra/oculta el menu
16     */
17    toggle: function(){
18        this.log("toggle()");
19        var me = this;
20
21        if($(me.options.id).hasClass("show")){
22            $(me.options.id).removeClass("show");
23            $(".vsfMenuOverlay[data-overlay='"+me.options.id+"']").removeClass("show");
24
25            setTimeout(function(){
26                $(me.options.id).hide();
27            }, 360);
28
29        }else{
30
31            $(me.options.id).css("height", $("body").height());
32            $(me.options.id).show();
33
34            $(me.options.id).addClass("show");
35            $(".vsfMenuOverlay[data-overlay='"+me.options.id+"']").addClass("show");
36        }
37
38    },
39    /**
40     * Inicializa la clase
41     */
42    init: function(options){
43        //Opciones por defecto
44        this.options = {
45            debug: false,
46            id: "#vsfMenu",
47            position: "left"
48        };
49
50        this.log("init()", options);
51        var me = this;
52
53        //Establecemos las opciones
54        if(options===Object(options)) {
55            for(var property in options){
56                if (options.hasOwnProperty(property)) {
57                    me.options[property] = options[property];
58                }
59            }
60        }
61
62        //Posicion del meu
63        $(me.options.id).addClass("position-"+me.options.position);
64
65        //Overlay
66        $(me.options.id).after("<div data-overlay='"+me.options.id+"' class='vsfMenuOverlay'></div>");
67
68        $(".vsfMenuOverlay[data-overlay='"+me.options.id+"']").click(function(){
69            me.toggle();
70            return false;
71        });
72
73        //Click cerrar
74        $(me.options.id+" .close").click(function(){
75            me.toggle();
76            return false;
77        });
78
79        if ($('#menuMovil').length > 0) {
80            $("#menuMovil .menu").click(function(){
81                var classText = $(this).find("i").attr('class');
82                var arrowClassUp= "fa-chevron-up";
83                var arrowClassDown= "fa-chevron-down";
84                console.log($(this).closest(".info_group").find(".submenus div:last-child li:last-child"));
85
86                if (classText.includes(arrowClassDown)) {
87                    newClass = "fa "+arrowClassUp;
88                    $(this).closest(".info_group").next().addClass("line");
89                    $(this).closest(".info_group").find(".submenus").stop().slideDown();
90                    $(this).find("i").removeClass(classText).addClass(newClass);
91                    $(this).closest(".info_group").find(".submenus div:last-child li:last-child").addClass("borderbottom");
92                }
93                else {
94                    newClass = "fa "+arrowClassDown;
95                    $(this).closest(".info_group").find(".submenus").stop().slideUp();
96                    $(this).closest(".info_group").next().removeClass("line");
97                    $(this).find("i").removeClass(classText).addClass(newClass);
98                    $(this).closest(".info_group").find(".submenus div:last-child li:last-child").removeClass("borderbottom");
99                }
100            });
101        }
102    }
103});