Menu icon Foundation
Multiple Off-Canvas Menu

I would like to have multiple off-canvas menus slide from the right. Is this possible?
FYI I am using Foundation 5 and I can only get it to slide left & right.

menumultipleoff-canvas

I would like to have multiple off-canvas menus slide from the right. Is this possible?
FYI I am using Foundation 5 and I can only get it to slide left & right.

Rafi Benkual over 5 years ago

Just curious, what is the use case for this? How will this improve customer interaction?

This should be possible if you add a custom class to the second menu and position it over so they are not stacked on top of each other.

Jordan Rodriguez about 5 years ago

I used JS to show and hide these menus.

So the theory is to give a specific class name to each ul in the side menu. You then assign that class name as a data attribute on the toggle icon you want to use. Then a javascript function will hide all menus then show the menu you want to see. Here is the code:

<a class="right right-off-canvas-toggle" href="#" data-listname="configure-list"><span>settingsiconhere</span></a>
<a class="right right-off-canvas-toggle" href="#" data-listname="regular-list"><span>regularmenuiconhere</span></a>
<a class="right right-off-canvas-toggle" href="#" data-listname="user-list"><span>usersiconhere</span></a>

And in your right-off-canvas-menu area here: Forgive indents, this is just copied from my template.

                   <ul class="off-canvas-list configure-list">
                        <li><label>Configure Options</label></li>
                        <li><a href="@Url.Action("Users","Config")">Users</a></li>
                        <li><a href="@Url.Action("OrganizationChart", "Config")">Organizational Chart</a></li>
                    </ul>
                    <ul class="off-canvas-list normal-list">
                        <li><label>Users</label></li>
                        <li><a href="#">Jordan</a></li>
                        <li><label>Projects</label></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                    <ul class="off-canvas-list user-list">
                             <li><label>More Users</label></li>
                             <li><a href="#">More Users</a></li>
                     </ul>

And then a javascript function to manage them

   $(document).ready(function () {

        $(".right-off-canvas-toggle").click(toggleConfigMenu);

    });

function toggleConfigMenu() {
        $(".right-off-canvas-menu ul.off-canvas-list").css("display", "none");
        $("." + $(this).data("listname")).css("display",'block');

    }

Michael C. almost 5 years ago

If I may bump this...

I've been working on a combo off-canvas / mega-menu (http://codepen.io/sandwich/pen/awpiq), and it could certainly benefit from a simple way to support multiple off-canvas panels per side. It converts said off-canvas panels into mega-menus above a certain breakpoint, and although one could argue that only one off-canvas panel is needed per side, there are definitely use cases for more than 2 mega-menus.

EDIT: I've got it basically working (http://codepen.io/sandwich/pen/mpCrq), but it's klutzy and hacky and kinda fugly. (EDIT 2: it also messes with the mega-menu mode. Derp.)

Basically, the toggle buttons have rel attributes which point to which menu they control. Each menu has a matching ID attribute. When a toggle is clicked, a class of 'visible' is added to the matching menu.

The problem comes when I want to remove the 'visible' class. The 'close.fndtn.offcanvas' event binding triggers the moment a toggle is clicked, which means that the removal of the 'visible' class happens before the off-canvas menu has slid out of view. What I need is a 'closed.fndtn.offcanvas' trigger, which goes off once it's completely closed. Alternately, just, y'know, native multiple off-canvas menu support. :p

To prevent the off-canvas menu from disappearing completely and leaving behind a blank space, I only hide every off-canvas menu that follows another off-canvas menu (eg ".left-off-canvas-menu + .left-off-canvas-menu") by default. So when one menu is closing and has been hidden from view, you at least see the menu "below" it instead of blank white space.

Not sure if that's better or not, but whatevs. Without serious refactoring of the JS that triggers the off-canvas menus (and I ain't a JS guy at all), I feel like this has reached the limits of what can be done.