Menu icon Foundation
Offcanvas overlap_single not working

I have problem with offcanvas open_metod setting. If I change default value to "single_overlap", I get syntax error.
Can anybody help me with that ?

Over lap

// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'overlap_single', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});
            

         

<div class="off-canvas-wrap" data-offcanvas>
            <div class="inner-wrap">
              <nav class="tab-bar">
                <section class="left-small">
                  <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                  <h1 class="title">Foundation</h1>
                </section>

                <section class="right-small">
                  <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
              </nav>

              <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><label>Foundation</label></li>
                  <li><a href="#">The Psychohistorians</a></li>
                  <li><a href="#">...</a></li>
                </ul>
              </aside>

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

              <section class="main-section">
                <div class="row">
                  <div class="small-12 columns">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo error, quis maiores, eaque eligendi molestiae soluta ipsa quasi, nisi qui aperiam quaerat sit iusto at dicta magnam. Illo, necessitatibus. Non placeat cum sit quos, reprehenderit quibusdam, itaque quaerat eveniet impedit accusantium quisquam aliquid aperiam incidunt rem nemo a deleniti voluptatum officia repudiandae repellendus. Repudiandae eaque quos eius eos ut dolore, similique voluptatum quas, amet quaerat voluptates labore eveniet laudantium nihil veniam deleniti, accusantium error. Voluptates deleniti explicabo id unde incidunt iusto harum, nihil soluta et, optio autem laboriosam. Sed perspiciatis iure, veritatis quia quisquam aliquam, corrupti pariatur. Assumenda sed, blanditiis, voluptate fuga modi accusantium aperiam consequatur eius alias ipsum rem illo nostrum officia repudiandae voluptatibus sunt autem. Facilis iste suscipit ullam, earum blanditiis esse fugiat reprehenderit debitis nisi adipisci dolorem, laborum ad repellat alias animi molestiae asperiores cupiditate dicta! Perspiciatis nobis incidunt dolorem dolor accusamus modi, cumque, explicabo autem aliquid.</p>
                  </div>
                </div>
              </section>

            <a class="exit-off-canvas"></a>

            </div>
          </div>
            

         

off-canvasjavascriptsingle_overlapjQuery syntax error

I have problem with offcanvas open_metod setting. If I change default value to "single_overlap", I get syntax error.
Can anybody help me with that ?

Over lap

// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'overlap_single', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});
            

         

<div class="off-canvas-wrap" data-offcanvas>
            <div class="inner-wrap">
              <nav class="tab-bar">
                <section class="left-small">
                  <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>

                <section class="middle tab-bar-section">
                  <h1 class="title">Foundation</h1>
                </section>

                <section class="right-small">
                  <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
              </nav>

              <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><label>Foundation</label></li>
                  <li><a href="#">The Psychohistorians</a></li>
                  <li><a href="#">...</a></li>
                </ul>
              </aside>

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

              <section class="main-section">
                <div class="row">
                  <div class="small-12 columns">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo error, quis maiores, eaque eligendi molestiae soluta ipsa quasi, nisi qui aperiam quaerat sit iusto at dicta magnam. Illo, necessitatibus. Non placeat cum sit quos, reprehenderit quibusdam, itaque quaerat eveniet impedit accusantium quisquam aliquid aperiam incidunt rem nemo a deleniti voluptatum officia repudiandae repellendus. Repudiandae eaque quos eius eos ut dolore, similique voluptatum quas, amet quaerat voluptates labore eveniet laudantium nihil veniam deleniti, accusantium error. Voluptates deleniti explicabo id unde incidunt iusto harum, nihil soluta et, optio autem laboriosam. Sed perspiciatis iure, veritatis quia quisquam aliquam, corrupti pariatur. Assumenda sed, blanditiis, voluptate fuga modi accusantium aperiam consequatur eius alias ipsum rem illo nostrum officia repudiandae voluptatibus sunt autem. Facilis iste suscipit ullam, earum blanditiis esse fugiat reprehenderit debitis nisi adipisci dolorem, laborum ad repellat alias animi molestiae asperiores cupiditate dicta! Perspiciatis nobis incidunt dolorem dolor accusamus modi, cumque, explicabo autem aliquid.</p>
                  </div>
                </div>
              </section>

            <a class="exit-off-canvas"></a>

            </div>
          </div>
            

         

This post has been closed. No new replies can be added.

Alexander Assimidis about 5 years ago

You could link your Site here so we can help - works fine for me

Giuseppe about 5 years ago

I change string to "overlap" and it works fine. I don't know what i should to do, becouse i using Foundation with bower and Compass. I also checked my js links and everything is ok.

P.S. I created new foundation project and update all files by "bower update" and i had same problem.
Bellow you will find my js links.

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.js"></script>
    <script src="bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>
    <script>
    $(document).foundation({
      offcanvas : { open_method: 'overlap_single', close_on_click : true }
    });
    </script>

UPDATE
I checked foundation.js file and i didn't find open_metod string called "single_overlap". I downloaded from Foundation website full represitory. A solution of this problem is manully event binding.