Menu icon Foundation
Off-canvas lots of content

Hi

I have just started with Foundation. I've created a page with an offcanvas menu. In my scenario, there is more content in the offcanvas menu than in the "main-section".

I've also specified the following:

div.inner-wrap {
min-height: 100%;
}

This is so that no matter how big the browser is, the offcanvas is the full size of the page when it shows.

When I click the button to close the offcanvas, it immediately scrolls to the height of the content in the "main-section" (like a closing roller-blind) before it has completely disappeared from the screen. In addition, because the offcanvas is taller than the main-section, it momentarily shows a scrollbar because of overflow.

Is there anything that can be done or is there a recommended approach to make sure that offcanvas is always the full height of the page and that as it disappears, it remains at full height?

I hope this isn't too confusing! :)

Thanks

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/meru.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>

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

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

          <aside class="left-off-canvas-menu" style="min-height: 100%">
              <ul class="off-canvas-list">
                  <li><label>Meru</label></li>
                  <li><a href="#">Support</a></li>
                  <li><a href="#">Check for new Apps</a></li>
                  <li><a href="#">Check for new Apps</a></li>
                  <li><a href="#">Check for new Apps</a></li>
                  <li><a href="#">Check for new Apps</a></li>
              </ul>
          </aside>

          <section class="main-section">
              <div class="row">
                  <div class="small-12 columns">
                      <div class="launcher">
                          <a><img src="img/apple_icon.png"></a>
                          <h4 class="subheader text-center">EzRF</h4>
                      </div>
                      <div class="launcher">
                          <a><img src="img/android_icon.png"></a>
                          <h4 class="subheader text-center">NM</h4>
                      </div>
                      <div class="launcher">
                          <a><img src="img/bb_icon.png"></a>
                          <h4 class="subheader text-center">SAM</h4>
                      </div>
                      <div class="launcher">
                          <a><img src="img/windows8_icon.png"></a>
                          <h4 class="subheader text-center">IDM</h4>
                      </div>
                  </div>
              </div>
          </section>

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

      </div>
  </div>
  <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

And the CSS ...

.launcher {
    width: 105px;
    height: 105px;
    display: inline-block;
    margin: 25px;
}

section.main-section {
    position: relative;
    height:100%;
}

div.off-canvas-wrap {
    overflow: hidden;
}

div.inner-wrap {
    min-height: 100%;
}

            

         

off-canvas

Hi

I have just started with Foundation. I've created a page with an offcanvas menu. In my scenario, there is more content in the offcanvas menu than in the "main-section".

I've also specified the following:

div.inner-wrap {
min-height: 100%;
}

This is so that no matter how big the browser is, the offcanvas is the full size of the page when it shows.

When I click the button to close the offcanvas, it immediately scrolls to the height of the content in the "main-section" (like a closing roller-blind) before it has completely disappeared from the screen. In addition, because the offcanvas is taller than the main-section, it momentarily shows a scrollbar because of overflow.

Is there anything that can be done or is there a recommended approach to make sure that offcanvas is always the full height of the page and that as it disappears, it remains at full height?

I hope this isn't too confusing! :)

Thanks

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/meru.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>

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

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

          <aside class="left-off-canvas-menu" style="min-height: 100%">
              <ul class="off-canvas-list">
                  <li><label>Meru</label></li>
                  <li><a href="#">Support</a></li>
                  <li><a href="#">Check for new Apps</a></li>
                  <li><a href="#">Check for new Apps</a></li>
                  <li><a href="#">Check for new Apps</a></li>
                  <li><a href="#">Check for new Apps</a></li>
              </ul>
          </aside>

          <section class="main-section">
              <div class="row">
                  <div class="small-12 columns">
                      <div class="launcher">
                          <a><img src="img/apple_icon.png"></a>
                          <h4 class="subheader text-center">EzRF</h4>
                      </div>
                      <div class="launcher">
                          <a><img src="img/android_icon.png"></a>
                          <h4 class="subheader text-center">NM</h4>
                      </div>
                      <div class="launcher">
                          <a><img src="img/bb_icon.png"></a>
                          <h4 class="subheader text-center">SAM</h4>
                      </div>
                      <div class="launcher">
                          <a><img src="img/windows8_icon.png"></a>
                          <h4 class="subheader text-center">IDM</h4>
                      </div>
                  </div>
              </div>
          </section>

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

      </div>
  </div>
  <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

And the CSS ...

.launcher {
    width: 105px;
    height: 105px;
    display: inline-block;
    margin: 25px;
}

section.main-section {
    position: relative;
    height:100%;
}

div.off-canvas-wrap {
    overflow: hidden;
}

div.inner-wrap {
    min-height: 100%;
}

            

         
Rafi Benkual over 5 years ago

Hi Gazey, welcome to Foundation! I added a tittle and tags for you. Make sure you add these when posting so people can find your post and help you. Thanks!