https://grupoblk.es/assets/front/js/ace-responsive-menu.js

1/* 
2Ace Responsive Menu Plugin
3Version: 1.0
4Author: Samson.Onna 
5Email : [email protected]
6----------------------------------------*/
7
8(function ($) {
9    $.fn.aceResponsiveMenu = function (options) {
10
11        //plugin's default options
12        var defaults = {
13            resizeWidth: '768',
14            animationSpeed: 'fast',
15            accoridonExpAll: false
16        };
17
18        //Variables
19        var options = $.extend(defaults, options),
20            opt = options,
21            $resizeWidth = opt.resizeWidth,
22            $animationSpeed = opt.animationSpeed,
23            $expandAll = opt.accoridonExpAll,
24            $aceMenu = $(this),
25            $menuStyle = $(this).attr('data-menu-style');
26
27        // Initilizing        
28        $aceMenu.find('ul').addClass("sub-menu");
29        $aceMenu.find('ul').siblings('a').append('<span class="arrow "></span>');
30        if ($menuStyle == 'accordion') { $(this).addClass('collapse'); }
31
32        // Window resize on menu breakpoint 
33        if ($(window).innerWidth() <= $resizeWidth) {
34            menuCollapse();
35        }
36        $(window).resize(function () {
37            menuCollapse();
38        });
39
40        // Menu Toggle
41        function menuCollapse() {
42            var w = $(window).innerWidth();
43            if (w <= $resizeWidth) {
44                $aceMenu.find('li.menu-active').removeClass('menu-active');
45                $aceMenu.find('ul.slide').removeClass('slide').removeAttr('style');
46                $aceMenu.addClass('collapse hide-menu');
47                $aceMenu.attr('data-menu-style', '');
48                $('.menu-toggle').show();
49            } else {
50                $aceMenu.attr('data-menu-style', $menuStyle);
51                $aceMenu.removeClass('collapse hide-menu').removeAttr('style');
52                $('.menu-toggle').hide();
53                if ($aceMenu.attr('data-menu-style') == 'accordion') {
54                    $aceMenu.addClass('collapse');
55                    return;
56                }
57                $aceMenu.find('li.menu-active').removeClass('menu-active');
58                $aceMenu.find('ul.slide').removeClass('slide').removeAttr('style');
59            }
60        }
61
62        //ToggleBtn Click
63        $('#menu-btn').on('click', function () {
64            $aceMenu.slideToggle().toggleClass('hide-menu');
65        });
66
67
68        // Main function 
69        return this.each(function () {
70            // Function for Horizontal menu on mouseenter
71            $aceMenu.on('mouseover', '> li a', function () {
72                if ($aceMenu.hasClass('collapse') === true) {
73                    return false;
74                }
75                $(this).off('click', '> li a');
76                $(this).parent('li').siblings().children('.sub-menu').stop(true, true).slideUp($animationSpeed).removeClass('slide').removeAttr('style').stop();
77                $(this).parent().addClass('menu-active').children('.sub-menu').slideDown($animationSpeed).addClass('slide');
78                return;
79            });
80            $aceMenu.on('mouseleave', 'li', function () {
81                if ($aceMenu.hasClass('collapse') === true) {
82                    return false;
83                }
84                $(this).off('click', '> li a');
85                $(this).removeClass('menu-active');
86                $(this).children('ul.sub-menu').stop(true, true).slideUp($animationSpeed).removeClass('slide').removeAttr('style');
87                return;
88            });
89            //End of Horizontal menu function
90
91            // Function for Vertical/Responsive Menu on mouse click
92            $aceMenu.on('click', '> li a', function () {
93                if ($aceMenu.hasClass('collapse') === false) {
94                    //return false;
95                }
96                $(this).off('mouseover', '> li a');
97                if ($(this).parent().hasClass('menu-active')) {
98                    $(this).parent().children('.sub-menu').slideUp().removeClass('slide');
99                    $(this).parent().removeClass('menu-active');
100                } else {
101                    if ($expandAll == true) {
102                        $(this).parent().addClass('menu-active').children('.sub-menu').slideDown($animationSpeed).addClass('slide');
103                        return;
104                    }
105                    $(this).parent().siblings().removeClass('menu-active');
106                    $(this).parent('li').siblings().children('.sub-menu').slideUp().removeClass('slide');
107                    $(this).parent().addClass('menu-active').children('.sub-menu').slideDown($animationSpeed).addClass('slide');
108                }
109            });
110            //End of responsive menu function
111
112        });
113        //End of Main function
114    }
115})(jQuery);
116