CODEWITHSUNDEEP
jqueryzurb-foundation
Joseph Sjoblom
Joseph Sjoblom

Reputation: 171

Making Foundation Zurb Off-Canvas Sidebar option slide right instead of left

Does anyone know how I can switch the functionality for Foundation Zurb's Off-Canvas Sidebar menu option to slide right instead of left?

Note: You'll have to shrink the screen in order to see the responsive functionality.

http://www.zurb.com/playground/playground/off-canvas/offcanvas-4.html

I tried switching the css so everything that was left is now right, but that didn't completely work. Here's the example: http://josephsjoblom.com/offcanvas/offcanvas-4-alt.html

Can someone help me figure out the issue?

Upvotes: 1

Views: 2012

Answers (2)

mickhayworth
mickhayworth

Reputation: 36

Try this:

<div class="off-canvas-wrap">
  <div class="inner-wrap">
   <nav class="tab-bar">
  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
</nav>

<aside class="right-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>Users</label></li>
    <li><a href="#">Hari Seldon</a></li>
    ...
  </ul>
</aside>

<section class="main-section">
  <!-- Main content goes here -->
</section>

From the docs: http://foundation.zurb.com/docs/components/offcanvas.html

Upvotes: 0

degie
degie

Reputation: 1

change in offcanvas_right.css:30

[role="complementary"] {
margin-right: -200%;

instead of

[role="complementary"] {
margin-left: -100%;

Upvotes: 0

Related Questions