My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices.
On desktop, I want the off-canvas menu always visible (see example).
For mobile, when the hamburger icon is clicked, I would like the menu to expand into an accordion style, instead of functioning as usual.
Here is the current code snippet provided:
<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>© 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 am aware that achieving this could involve using hide/show classes, but duplicating the menu for this purpose seems inefficient to me. Any suggestions or solutions are appreciated. Thank you for your time!