search

vmitsaras / js-offcanvas

A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.
http://codepen.io/vmitsaras/pen/gwGwJE
MIT License
270 stars 30 forks source link

Is it possible to open two columns? #51

Open ppazos opened 4 years ago

ppazos commented 4 years ago

Is your feature request related to a problem? Please describe.

All examples show just one section off-canvas. For an app I need this navigation:

[ main ] | [ section1 ] | [ section 2]

Where section 1 and section 2 are off-canvas for main. Then an item in main (button/link) opens section 1, there section 2 is off-canvas for section 1, and an item in section 1 (button/link) opens section 2.

I'm not sure if something like this is supported.

vmitsaras commented 4 years ago

Hi @ppazos,

this definitely possible - like gmaps Menu can you try this:

<!--Offcanvas Content Wrapper-->
<main class="c-offcanvas-content-wrap">     
    <button class="c-button js-offcanvas-trigger" data-offcanvas-trigger="off-canvas-left">Section 1</button>
</main>

<!--Left-->
<aside class="js-offcanvas" id="off-canvas-left">
  <h2>Section 1</h2>
   <button class="js-offcanvas-trigger" data-offcanvas-trigger="off-canvas-left-inside">Open Section 2</button>
  <button class="js-offcanvas-close">Close</button>
</aside>

<!--Left Inside-->
<aside class="js-offcanvas js-open" data-offcanvas-options='{"modifiers":"left,overlay"}' id="off-canvas-left-inside" role="complementary">
   <h2>Section 2</h2> 
  <button class="js-offcanvas-close">Back</button>
</aside>
ppazos commented 4 years ago

@vmitsaras thanks, I'll try in on the weekend and get back.