Second bootstrap jasny offcanvas push menu

Question

I´m using a Bootstrap Jasny offcanvas push navigation like here: http://www.jasny.net/bootstrap/examples/navmenu-push/

Now, I´d like to have an additional offcanvas navigation but I don´t know how to go about it as I have zero JS knowledge.

I only manage to create a second navigation and add a second toggle button that opens/closes the second navigation. However, it doesn´t close the first one when it´s open (and viceversa). Ideally, it would first close the first navigation completely and then open the second.

Any help would be appreciated. Thanks in advance!

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
 <a class="navmenu-brand" href="#">Navigation1</a>
 <ul class="nav navmenu-nav">
  <li>stuff</a></li>
 </ul>
</div>
<div class="navmenu2 navmenu-default navmenu-fixed-left offcanvas">
 <a class="navmenu-brand" href="#">Navigation2</a>
 <ul class="nav navmenu-nav">
  <li><a href="../navmenu/">more stuff</a></li>
  </ul>
</div>

<div class="navbar navbar-default navbar-fixed-top">
 <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
  navibutton1
 </button>
 <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu2" data-canvas="body">
  navibutton2
 </button>
</div>

https://jsfiddle.net/L2evyhuL/1/

Answer 1

All of my offcanvas panels are based on the '.navmenu' class. I made this general script that will close all open panels and will open the target panel as soon as the open panel is hidden. In this way I can have multiple panels but only one can be open.

$("[data-toggle='offcanvas']").on("click", function (e) {
    var target = $(this).data('target');
    var target_canvas = $(this).data('canvas');
    var items = $(".navmenu:not(" + target + "):visible");
    if (items.length > 0) {
        $.each(items, function (index, value) {
            $(value).on('hidden.bs.offcanvas', function () {
                $(this).unbind('hidden.bs.offcanvas');
                $(target).offcanvas({ canvas: target_canvas });
                $(target).offcanvas('show');
            });
            $(value).offcanvas('hide');
        });
        e.preventDefault();
        return false;
    }
});

The click event is for the elements that toggle the panel. For example:

<i class="fa fa-angle-double-left pull-right " aria-hidden="true" type="button" data-toggle="offcanvas" data-canvas="body" data-target="#navmenu"></i>

Answer 2

i removed the "data-toggle" and went fully with the jScript-initiation:

$(".navbar-toggle").click(function(){
    var target = $(this).attr("data-target");
    $(".navmenu, .navmenu2").offcanvas('hide');
    $(""+target+"").offcanvas('show');
});

the event fires if you click on a link with the class .navbar-toggle and gets the current "data-target" attribute to the variable "target". after that it hides the offcanvas - just for the case that one is opened, and then it shows the targeted one.

working example: https://jsfiddle.net/jarkz3mz/

but i wouldn't recommend using jasny-offcanvas cause everytime you open an offcanvas menu jasny adds another clone-div in the source code and will do so for every click on the nav-toggle. would reommend using own programmed offcanvas menu or go for something like mmenu (http://mmenu.frebsite.nl/)