CODEWITHSUNDEEP
jquerycsszurb-foundationzurb-foundation-6
joewindetc
joewindetc

Reputation: 61

Off-canvas Menu On Desktop, Accordion Menu on Mobile [Foundation 6.3]

Using Foundation 6.3.1, I'd like to have my off-canvas menu show on desktop, with an accordion menu displayed on mobile. e.g.

This is the desktop view with a consistently-open off-canvas (intentional).

Now on mobile when clicking the hamburger, I'd like the menu to expand as such, versus working per usual.

Here's my current code: 

    <div class="off-canvas position-left reveal-for-medium" id="masthead" data-off-canvas>

      <!-- start main navigation -->
      <nav class="main-menu">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </nav>
      <!-- end main navigation -->

      <section class="copyright">
        <div class="row">
          <div class="small-12 columns">
            <p><small>&copy; 2017<br>All Rights Reserved.</small></p>
          </div>
        </div>
      </section>

    </div>
    <!-- off-canvas -->

    <div class="off-canvas-content" data-off-canvas-content>

      <!-- start title-bar -->
      <div class="title-bar hide-for-medium">
        <div class="title-bar-left">
          <span class="title-bar-title">Title Bar</span>
        </div>
        <div class="title-bar-right">
          <button class="menu-icon" type="button" data-open="masthead" aria-expanded="false" aria-controls="masthead"></button>
        </div>
      </div>
      <!-- end title-bar -->

      <!-- start body content -->
      <main class="body-content">
        <p>Welcome, one and all.</p>
      </main>
      <!-- end body content -->

    </div>
    <!-- off-canvas-content -->

  </div>
  <!-- off-canvas-wrapper-inner -->
</div>
<!-- off-canvas-wrapper -->

I know this could easily be done with some hide/show classes, but I'd rather not have to duplicate the menu to do so, it's just so inefficient. Any ideas? Thanks for your time.

Upvotes: 1

Views: 640

Answers (1)

j-printemps
j-printemps

Reputation: 1298

You can try to set your hamburger position to fixed or absolute, or add another close button in your position-left container, and rewrite offcanvas css to something like that :

.position-left {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  overflow-y: auto;
}

.position-left.is-open~.off-canvas-content {
    transform: translateX(100%);
}

And then adapt your menu with media-queries.

Upvotes: 1

Related Questions