Menu icon Foundation
Just built a full height off canvas menu

It is supposed to always show on screens larger than 640px wide and hide by default on 640px and lesser with. It should behave when you resize your screen. I found a bug that happens when on my android when scrolling, the menu "closes".

So I need some feedback on the functionality, you can find it here:

http://creeight.se/

Thanks in advance.

off canvasfull heightmenu

It is supposed to always show on screens larger than 640px wide and hide by default on 640px and lesser with. It should behave when you resize your screen. I found a bug that happens when on my android when scrolling, the menu "closes".

So I need some feedback on the functionality, you can find it here:

http://creeight.se/

Thanks in advance.

meret 12 months ago

Hello, can u say something about a https://mobile-spy-apps.com mobile recorder on Android. How can we use this application in our phones? 

Karl Ward over 5 years ago

Cool, thanks for sharing ... I would want to look into having the off-canvas menu on-canvas like in your example for a project branch coming up soon ... will look into it then.

I do still have some reservations about the off-canvas menu, more specifically the "fixed" position issue, which is outlined in my post here: http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar (scroll down).

Robin Cox over 5 years ago

I tested it with alot of text and it seemd to work good.

Robin Cox over 5 years ago

I only made changes in settings/_settings.scss and js/app.js

This is the html markup:

<div class="off-canvas-wrap docs-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">
              <h2 class="title">Header</h2>
            </section>
          </nav>

          <aside class="left-off-canvas-menu">

            <h2 class="Header">H</h2>

            <ul class="off-canvas-list">
              <li><label>Foundation</label></li>
              <li><a href="#">The Psychohistorians</a></li>
              <li><a href="#">The Encyclopedists</a></li>
              <li><a href="#">The Mayors</a></li>
              <li><a href="#">The Traders</a></li>
              <li><a href="#">The Merchant Princes</a></li>
              <li><label>Foundation and Empire</label></li>
              <li><a href="#">The General</a></li>
              <li><a href="#">The Mule</a></li>
              <li><label>Second Foundation</label></li>
              <li><a href="#">Search by the Mule</a></li>
              <li><a href="#">Search by the Foundation</a></li>
            </ul>
          </aside>

          <div class="row" id="outerBoundry">
            <div id="innerBoundry">
              <div class="large-12 columns">
                <h1>Lorem ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>

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

        </div>

    </div>

Notice the two divs I added:
div#outerBoundry
div#innerBoundry

The css I added is:

.exit-off-canvas, .menu-icon {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media only screen and (min-width: 40.063em) {

  .left-off-canvas-menu {
    overflow: hidden !important;
  }

  #outerBoundry {
    padding-right: 250px;
    width: 80% !important;
    max-width: 80% !important;
  }

  .exit-off-canvas {
     pointer-events: none;
     cursor: default;
  }

  .tab-bar {
    display: none;
  }

  .inner-wrap {
      *zoom: 1;
      -webkit-transition: -webkit-transform 0ms !important;
      -moz-transition: -moz-transform 0ms !important;
      -ms-transition: -ms-transform 0ms !important;
      -o-transition: -o-transform 0ms !important;
      transition: transform 0ms !important;
  }

}

The jQuery I added:


```Javascript 
 // Always show offcanvas menu on other than tablets and smartphones

if(window.innerWidth > 640) {

  $(".off-canvas-wrap").addClass("move-right");

}

$(window).resize(function() {

  if(window.innerWidth < 641) {

    $(".off-canvas-wrap").removeClass("move-right");

  }

  if(window.innerWidth > 640) {

    $(".off-canvas-wrap").addClass("move-right");

  }

});





// Take up fullscreen

if($("#outerBoundry").height() < $('.left-off-canvas-menu').prop('scrollHeight')) {

  $("#outerBoundry").css("height", $('.left-off-canvas-menu').prop('scrollHeight')+"px");

}

if($("#outerBoundry").height() < window.innerHeight) {

  $("#outerBoundry").css("height", window.innerHeight+"px");

}

$(window).resize(function() {

  $("#outerBoundry").css("height", window.innerHeight+"px");

  if($("#outerBoundry").height() < $("#innerBoundry").height()) {

    $("#outerBoundry").css("height", $("#innerBoundry").height()+"px");

  }

  if($("#outerBoundry").height() < $('.left-off-canvas-menu').prop('scrollHeight')) {

    $("#outerBoundry").css("height", $('.left-off-canvas-menu').prop('scrollHeight')+"px");

  }

});

Karl Ward over 5 years ago

Cool. It seems to work well. I would recommend you fill one of your pages with a lot of vertical content so you can see how it performs when the page is scrolled ...

Did you just hack the CSS of the foundation off-canvas menu to get it to work like this?