multinivel - offcanvas menu jquery

Jquery mmenu-Restablecer el menú al nivel principal al cerrar

Question

Actualmente tengo mmenu como mi menú móvil. Necesito poder restablecer mi menú al primer nivel al cerrar. A partir de ahora, la funcionalidad predeterminada me deja donde la dejé mientras navegaba más profundamente en el subnivel luego de cerrar el menú y volver a abrirlo.

Agradecería muchísimo la ayuda con este asunto.

¡¡Gracias!!

Answer 1

Puede usar el evento de devolución de llamada "cerrado" para cerrar todos los paneles abiertos.

El truco para hacer esto -cuando usa submenús horizontales (la configuración predeterminada) - es abrir el primer panel (el menú de nivel "principal").

$("#menu").mmenu();
$("#menu").on( "closed", function() {
    $("#menu .mm-panel").first().trigger( "open.mm" );
});

Answer 2

Podrías tratar de piratear la lib misma.

Por ejemplo:

a. encuentre este código (ca. # 374):

this.__transitionend(a.$page.first(), function () {

segundo. justo después del código anterior, puede insertar algo como esto:

var jid = t.$menu.attr(''id''); $(''#'' + jid + '' .mm-panels'').fadeOut(''fast'', function(){ $(this).children().removeClass(''mm-opened mm-subopened mm-hidden mm-current mm-highest''); $(''#'' + jid + '' .mm-panels :first-child'').addClass(''mm-opened mm-current''); }).fadeIn(''fast'');

explicación:

El código de mm original (uno que está buscando) dispara en el panel que está cerrado, independientemente de cómo o por qué se está cerrando.

Código que acaba de pegar, reorganiza las clases utilizadas por el motor mmenu para cambiar los estados de mmenú.

Para que todas las transiciones sucedan sin problemas, la sección visible del panel (por ejemplo, si usa la extensión de la barra de iconos) se desvanece, y después del reposicionamiento de los paneles de menú, la barra de iconos principal se está desvaneciendo.

Answer 3

La respuesta de Fred funciona en una versión anterior de Mmenu, pero si está utilizando la versión más reciente (la más reciente en el momento en que se publicó fue 5.6.1), puede usar los métodos de API como los siguientes:

var api = $("#menu").data( "mmenu" );
api.bind( "closed", function() {
    api.closeAllPanels();
});

Answer 4

Pruebe esto en cualquier menú, haga clic en:

$(".mm-subclose").trigger(''click'');

Trigger () es una función JQuery. Cuando hacemos clic en la flecha hacia atrás en la parte superior del submenú. Los submenús se ocultan. Entonces, cuando usamos ".mm-subclose" la clase de flecha hacia atrás, Menu se restablece al nivel principal.

Answer 5

Pude resolver esto agregando una función de Javascript a mi menú, que le permite navegar al nivel de inicio (# mm-1). También le permite abrir cualquier panel pasando el enlace relativo como parámetro. Por favor, eche un vistazo al siguiente código:

HTML

        <div class="mh-head navbar-fixed-top">
        <span class="mh-btns-left"><a class="fa fa-bars" 
        onclick="openSubmenu(''#mm-1'')"></a></span>
        </div>

Javascript

        function openSubmenu(submenu) {
            instantiateComponents(submenu);
            openDesiredSubmenu();
        }

        function instantiateComponents(submenu) {
            instantiateCurrentMenu();
            instantiateApi();
            instantiateDesiredSubmenu(submenu);
        }

        function instantiateCurrentMenu() {
            currentMenu = $(''#menu'');
            currentMenu.mmenu({});
        }

        function instantiateApi() {
            menuApi = currentMenu.data(''mmenu'');
        }

        function instantiateDesiredSubmenu(submenu) {
            desiredSubmenu = currentMenu.find(submenu);
        }

        function openDesiredSubmenu() {
            menuApi.openPanel(desiredSubmenu.closest(''.mm-panel'')); 
            menuApi.open();
        }

Espero que esto sea útil.