Menu icon Foundation
Nesting offcanvas menus

I am new to foundation and here is what I am trying to accomplish.

I have a top bar with (left) off canvas menu and which wraps entire page.
I have sticky sub navigation bar which is show only for small screens. Using jquery plugin stickUp.js.
Now I added a right off canvas inside sticky sub-nav bar which opens up a context sensitive menu - different menu items depending which page user is on.

So basic structure in pseudo code is as follows

<div class="off-canvas-wrapper">
    <div class="inner-wrapper">
        <a class="left-off-canvas-toggle menu-icon"></a>
    <aside class="left-off-canvas-menu"><!-- menu --></aside>
    <div class-"sticky-nav">
        <div class="off-canvas-wrapper">
            <div class="inner-wrapper">
                <a class="right-off-canvas-toggle menu-icon"></a>
                <aside class="right-off-canvas-menu"><!-- menu--></aside>
    </div>
    <div><!-- page content--></div>
    <a class="exit-off-canvas"></a>
    </div></div> <!-- closing nested wrappers -->
</div></div> <!-- closing outer wrappers -->


            

         

Problem is - when I click on right menu toggle, blank right side menu is shown.

Is this use case possible with foundation offcanvas? If yes, what am I missing?

offcanvasmenu

I am new to foundation and here is what I am trying to accomplish.

I have a top bar with (left) off canvas menu and which wraps entire page.
I have sticky sub navigation bar which is show only for small screens. Using jquery plugin stickUp.js.
Now I added a right off canvas inside sticky sub-nav bar which opens up a context sensitive menu - different menu items depending which page user is on.

So basic structure in pseudo code is as follows

<div class="off-canvas-wrapper">
    <div class="inner-wrapper">
        <a class="left-off-canvas-toggle menu-icon"></a>
    <aside class="left-off-canvas-menu"><!-- menu --></aside>
    <div class-"sticky-nav">
        <div class="off-canvas-wrapper">
            <div class="inner-wrapper">
                <a class="right-off-canvas-toggle menu-icon"></a>
                <aside class="right-off-canvas-menu"><!-- menu--></aside>
    </div>
    <div><!-- page content--></div>
    <a class="exit-off-canvas"></a>
    </div></div> <!-- closing nested wrappers -->
</div></div> <!-- closing outer wrappers -->


            

         

Problem is - when I click on right menu toggle, blank right side menu is shown.

Is this use case possible with foundation offcanvas? If yes, what am I missing?

This post has been closed. No new replies can be added.

sushrut bidwai almost 6 years ago

Actually was able to resolve this.

Solution -

  1. Dont need multiple offcanvas wrappers and exit-off-canvas divs.
  2. Place toggle buttons wherever, does not matter.

So simplified code looks like -

<div class="off-canvas-wrapper">
    <div class="inner-wrapper">
        <a class="left-off-canvas-toggle menu-icon"></a>
    <aside class="left-off-canvas-menu"><!-- menu --></aside>
    <aside class="right-off-canvas-menu"><!-- menu --></aside>
    <div class-"sticky-nav">
               <a class="right-off-canvas-toggle menu-icon"></a>
    </div>
    <div><!-- page content--></div>
    <a class="exit-off-canvas"></a>
</div></div> <!-- closing outer wrappers -->

Thank you for an awesome tool.

Note to self - think more before asking the internet.