Wie implementiere ich mehrere Navmenüs?

Question

Ich verwende die navmenu Funktion von Bootstrap. Kürzlich wurde mir klar, dass ich einen zweiten brauche. Da ich den Slide-In-Ansatz verwende (wobei der Z-Index des NavMenu auf 1 und Canvas auf 2 gesetzt ist), führt das Hinzufügen eines zweiten Sliders zu dem Problem, dass das eine das andere verdeckt. es kam mir in den Sinn, den zweiten Schieberegler auf der rechten Seite zu platzieren, aber das scheint nicht gut zu funktionieren ... Bootstrap zeigt etwas funky Verhalten beim Öffnen ...

so meine Frage: Wie sind mehrere Navmenus implementiert? habe ich ein einzelnes NavMenu mit mehreren divs, die ich verstecken/anzeigen muss? oder muss ich mehrere Navenus verstecken/anzeigen?

bearbeiten I

als logische Folge, ist es eine Möglichkeit, mich in die Animation Haken, zur Verfügung stellt Bootstrap? Ich kann einen Klick-Handler auf dem nabvar-Element einrichten, das das navmenu öffnet/schließt, um den richtigen Inhalt anzuzeigen/auszublenden, aber es wird unabhängig von dem Verschieben ausgeführt, so dass es zuerst gleitet und dann angezeigt wird. was ich möchte tun Kette auf den Objektträger, so dass es vor der Folie zeigt und versteckt sich hinter dem Schlitten

bearbeiten II

ah. eine andere Erwähnung: Ich bin mit dem jasny-Bootstrap Plugin

Answer 1

durch die Quelle für Jasny Suche fand ich, dass es möglich ist, in den Start/Ende der Show/Hide Prozess Haken:

$('.navmenu') 
    .on('show.bs.offcanvas', function() { 
     $(this).show(); 
    }) 
    .on('hidden.bs.offcanvas', function() { 
     $(this).hide(); 
    }); 

und natürlich sind die anderen Veranstaltungen zur Verfügung: shown.bs.offcanvas und hide.bs.offcanvas

bearbeiten I

nach dem viel kämpfen bove nicht geklappt, so landete ich meine verschiedenen Seiten in einem einzigen Schieber wie dies das Aufstellen:

<div id="slider"> 
    <div id="page1"> 
    </div> 
    <div id="page2"> 
    </div> 
</div> 

einen zusätzlichen Parameter zum toggler Zugabe:

<a class="nav-toggle" 
    data-toggle="offcanvas" 
    data-recalc="false" 
    data-target="#slider" 
    data-canvas="#canvas" 
    data-page="#page1" 
></a> 

und es auf dem Klick Event-Handling :

$('.nav-toggle').click(function(e) { 
    var sld = $(this).data('target'); 
    var page = $(this).data('page'); 
    if (sld.hasClass('in') && !sld.find(page).is(':visible')) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    sld.find('> *').hide(); 
    sld.find(page).show(); 
});