Added option for opening individual off canvas content when using overlap

Added a config option, (‘overlap_single’), to specify overlaping only
the individual off canvas content that was request, as with the slide
in option.

All documentation has also been updated to reflect the new option.

diff --git a/doc/includes/off_canvas/examples_offcanvas_javascript_options.html b/doc/includes/off_canvas/examples_offcanvas_javascript_options.html
index 324f50d0f9cfb1fc98242c7a1f3b71965a940125..47f3ccc67ce2ef1019b2b3e3abc4ca6cc7dbb0f7 100755 (executable)
--- a/doc/includes/off_canvas/examples_offcanvas_javascript_options.html
+++ b/doc/includes/off_canvas/examples_offcanvas_javascript_options.html
@@ -3,7 +3,7 @@
 $(document).foundation({
   offcanvas : {
     // Sets method in which offcanvas opens.
-    // [ move | overlap ]
+    // [ move | overlap_single | overlap ]
     open_method: 'move', 
     // Should the menu close when a menu link is clicked?
     // [ true | false ]

diff --git a/doc/pages/components/offcanvas.html b/doc/pages/components/offcanvas.html
index 91ebbb27fd73f19b7d92fd3e2585ec898e72238f..25893214f97bb1e22d0f8e4792f9dcad92ed9f09 100755 (executable)
--- a/doc/pages/components/offcanvas.html
+++ b/doc/pages/components/offcanvas.html
@@ -302,7 +302,7 @@ Required Foundation Library: `foundation.offcanvas.js`
 
 ### Optional Javascript Configuration
 
-**open_method** <br> Default: `move` <br> Defines how the off-canvas menu behaves. Can be `move` or `overlay`.
+**open_method** <br> Default: `move` <br> Defines how the off-canvas menu behaves. Can be `move` `overlap_single` or `overlap`.
 
 **close_on_click** <br/> Default: `false` <br> Control whether or not clicking menu links will close the menu.
 
@@ -344,7 +344,7 @@ $(document)
 
 ### Programmatic open / close / toggle
 
-The `.off-canvas-wrap` container can be targeted for javascript methods. At this time, the presentational open class needs to be included: either `move-right`, `move-left`, or `offcanvas-overlap`.
+The `.off-canvas-wrap` container can be targeted for javascript methods. At this time, the presentational open class needs to be included: either `move-right`, `move-left`, `offcanvas-overlap-left`, `offcanvas-overlap-right` or `offcanvas-overlap`.
 
 ```js
 $('.off-canvas-wrap').foundation('offcanvas', 'open', 'move-right');

diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js
index 8d9b26f5655ff6a551bbefcae473752808d4751e..e3cb2d3f4e82968812103d78a0ae40026ea7956b 100755 (executable)
--- a/js/foundation/foundation.offcanvas.js
+++ b/js/foundation/foundation.offcanvas.js
@@ -26,6 +26,10 @@
         move_class = 'move-';
         right_postfix = 'right';
         left_postfix = 'left';
+      } else if (this.settings.open_method === 'overlap_single') {
+        move_class = 'offcanvas-overlap-';
+        right_postfix = 'right';
+        left_postfix = 'left';
       } else if (this.settings.open_method === 'overlap') {
         move_class = 'offcanvas-overlap';
       }

diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss
index dd082c02b8b0e929233d1e4adf99d8db2cc1723a..a2493338c1644b92cad8b1f7402eb16ab8d0d1c5 100755 (executable)
--- a/scss/foundation/components/_offcanvas.scss
+++ b/scss/foundation/components/_offcanvas.scss
@@ -340,6 +340,28 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .offcanvas-overlap-left {
+      .right-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-off-canvas { @include back-link; }
+    }
+    .offcanvas-overlap-right {
+      .left-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-off-canvas { @include back-link; }
+    }
 
     // Older browsers
     .no-csstransforms {