https://balclis.com/site/view/templates/Balclis/js/navmenu.js

1/*
2 * Controles del menu lateral (principalmente responsive)
3 */
4$(document).ready(function () {
5    /*$("#sidebar").niceScroll({
6     cursorcolor: '#53619d',
7     cursorwidth: 4,
8     cursorborder: 'none'
9     });*/
10
11
12
13    // preparamos el overlay
14    $("body").prepend('<div class="overlay"></div>');
15
16    // Duplicamos el menu normal en el desplegable
17    $("#sidebar .menu").html(
18            $("#navbarResponsive > ul").html()
19            );
20
21    var menuProyecto = $(".menu-lateral.sidebar > li > ul").html();
22    if (menuProyecto !== undefined) {
23        var aParentProyecto = $("#sidebar a[href*='#content']");
24        var parentProyecto = $(aParentProyecto).parent();
25        parentProyecto.append("<ul>" + $(".menu-lateral.sidebar > li > ul").html() + "</ul>")
26        aParentProyecto.addClass("active");
27        parentProyecto.addClass("active");
28    }
29
30
31    $('#dismiss, .overlay').on('click', function () {
32        $('#sidebar').removeClass('active');
33        $('.overlay').fadeOut();
34    });
35
36    $('#sidebar-toggle').on('click', function () {
37        if ($('#sidebar').hasClass('active')) {
38            // Ocultamos el menu
39            $(".overlay").click();
40            $(".masthead .logo-container.floater").show();
41        } else {
42            // Mostrmaos el menu
43            $('#sidebar').addClass('active');
44            $('.overlay').fadeIn();
45            $('.collapse.in').toggleClass('in');
46            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
47            $(".masthead .logo-container.floater").hide();
48        }
49    });
50
51
52    /*if ($(window).innerWidth() >= 1200) {
53     $("body.home #sidebar-toggle").click();
54     }*/
55
56    $("#sidebar").css('transition', 'all 0.3s');
57
58
59    //
60    // Funciones para desplegar submenus
61    //
62
63    /**
64     * Abre/Cierra un submenu con efecto
65     * @param {type} elemento
66     * @returns {undefined}
67     */
68    function toggleSubmenu(elemento) {
69        elemento.toggle(200);
70    }
71
72    // Al cargar la web:
73
74    // Desplegamos los padres
75    $('#sidebar .active, .sidebar .active').parents('ul').each(function (k, el) {
76        $(el).show();
77    });
78    $('#sidebar .active, .sidebar .active').parents('li').each(function (k, el) {
79        $(el).addClass('active');
80    });
81
82    // Desplegamos los primeros niveles
83    $('.sidebar > li > ul, .sidebar > li > ul > li > ul, #sidebar li.active > ul').each(function (k, el) {
84        //Quitamos le show de los primeros niveles para que no se desplieguen todos
85        //$(el).show();
86    });
87    $('.sidebar > li > ul, .sidebar > li > ul > li > ul').each(function (k, el) {
88        //Quitamos le show de los primeros niveles para que no se desplieguen todos
89        $(el).hide();
90    });
91
92    // Quitamos el primer elemento de las subcategorias
93    $('.sidebar > li > ul > li > ul ul > li:first-child').each(function (k, el) {
94        $(el).hide();
95    });
96
97    // Desplegamos el hijo
98    $('#sidebar .active').next('ul').show();
99    $('.sidebar .active').children('ul').show();
100
101    // Al hacer clic en elementos
102    $("#sidebar a > i").on('click', function (e) {
103        toggleSubmenu($(this).parent().next('ul'));
104        return false;
105    });
106
107    $(".sidebar > li > ul > li > a").on('click', function (e) {
108        //$(".sidebar > li > ul > li > ul").hide();
109        var currentIndex = $(".sidebar > li > ul > li > a").index(this);
110
111        $(".sidebar > li > ul > li > ul").each(function (index) {
112            // Evitamos que se cierre el actual (sino se volveria abrir en toogloe) 
113            // y el que tenga elementos activos
114            if (currentIndex != index && $(this).find(".active").length <= 0) {
115                $(this).hide();
116            }
117        });
118    });
119
120    //$(".sidebar a").on('click', function (e) {
121    $(".sidebar > li > ul > li > a").on('click', function (e) {
122        //if (!$(this).is('[href]') || $(this).next('ul').length) {
123        if ($(this).next('ul').length) {
124            toggleSubmenu($(this).next('ul'));

125
126            refreshMenuLateral(true);
127            return false;
128        }
129    });
130
131    $("#sidebar a").on('click', function () {
132        if (!$(this).attr('href')) {
133            toggleSubmenu($(this).next('ul'));
134        } else {
135            $(".overlay").click();
136        }
137    });
138
139
140    // Seguimiento scroll
141    var menuScroll = $(".menu-lateral");
142
143    var menuParent = menuScroll.parent();
144    if (menuParent.length > 0) {
145        var extraSpace = parseInt($("#mainNav").innerHeight()) + 10;
146        menuScroll.css('position', 'absolute');
147        menuParent.css('min-height', menuScroll.innerHeight());
148
149        // Control del scroll para la direccion
150        var previousScroll = 0;
151
152        refreshMenuLateral(true);
153        $(window).scroll(function () {
154            refreshMenuLateral()
155        });
156    }
157
158    /**
159     * 
160     * @param {type} forceRefresh Si es true readaptara el espacio que ocupa el menu (pasandolo de absolute a relative y viceversa)
161     * @returns {undefined}
162     */
163    function refreshMenuLateral(forceRefresh) {
164        if ($(this).width() < 768)
165            return;
166
167        if (forceRefresh) {
168            // Hacemos que la capa que contiene el menu se reajuste si es mas peque�a
169            var currentPosition = menuScroll.css('position');
170            menuScroll.css('position', '');
171            menuScroll.css('position', currentPosition);
172        }
173
174        // PX de desplazamiento del scroll a�adiendo el espacio extra (un menu flotante, etc...)
175        var currentScroll = $(this).scrollTop();
176
177        //
178        // Variables que cambian al redimensionarse el navegador u otros casos
179        //
180
181        // Posicion en la que comienza el contenedor del menu (absoluta)
182        var startMenuContainer = parseInt(menuParent.offset().top);
183
184        // Posicion en la que termina el contenedor del menu (absoluta)
185        var endMenuContainer = startMenuContainer + menuParent.innerHeight();
186
187        // Tama�o del menu
188        var heightMenu = parseInt(menuScroll.innerHeight());
189
190        // Variable a asignar con la nueva posicion absoluta
191        var newPosition = null;
192
193        if ($(this).innerHeight() > heightMenu) {
194            // Mostramos el menu en la pantalla si cabe siguiendo al usuario tal cual
195            if (currentScroll + extraSpace > startMenuContainer) {
196                newPosition = currentScroll + extraSpace - startMenuContainer;
197            } else {
198                newPosition = 0;
199            }
200        } else {
201            // El menu no cabe en la ventana, tenemos que hacer que simular el seguimiento inteligente
202
203            //
204            // Variables dinamicas
205            //
206
207            // Calculamos donde termina la vista del navegador
208            var windowBottom = currentScroll + $(this).innerHeight();
209
210            // Posicion TOP actual del menu
211            var menuTop = menuScroll.css('top');
212            menuTop = (menuTop == 'auto') ? 0 : parseInt(menuTop);
213
214            if (currentScroll > previousScroll) {
215                // Scroll DOWN
216                if (currentScroll > startMenuContainer) {
217                    // Posicion donde termina actualmente el menu superior (absoluta al navegador)
218                    var menuEndTop = menuTop + heightMenu + startMenuContainer + extraSpace;
219
220                    // El menu esta "oculto"
221                    if (windowBottom > menuEndTop) {
222                        newPosition = windowBottom - heightMenu - startMenuContainer - extraSpace;
223                    }
224                }
225            } else {
226                var menuStartTop = menuTop + startMenuContainer + extraSpace;
227                // Scroll UP
228                if (currentScroll < menuStartTop) {
229                    newPosition = currentScroll - startMenuContainer + extraSpace;
230                }
231            }
232        }
233
234
235        // Actualizamos la posicion del elemento
236        if (newPosition !== null) {
237            // Evitamos que se sobresalga del menu
238            if (newPosition < 0) {
239                newPosition = 0;
240            }

240 else if (newPosition + heightMenu + startMenuContainer > endMenuContainer) {
241                newPosition = endMenuContainer - heightMenu - startMenuContainer;
242            }
243            menuScroll.css('top', newPosition);
244        }
245
246        // Actualizamos el scroll anterior
247        previousScroll = currentScroll;
248    }
249});