aBgEoR

abgeor.markdown

aBgEoR

A Pen by Vail on CodePen.

License.

index.html

<main class="fullwidth">
  <div id="west" class="column duo">
    <div class="toggle">
    </div>

    <div class="menu closed">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Stuff</li>
          <li>Cooking</li>
          <li>Games</li>
        </ul>
    </div>

    <div class="container">
    <div class="content">
      <div class="text">
      <h1>Off canvas nav</h1>

        <hr />

        <h2>The toggle is the green bar on the left.<br>It transforms into an overlay - Click on it to close the menu.</h2>

        <hr />

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel risus posuere, aliquam velit id, mollis est. Aliquam mollis vel nunc vitae rhoncus. Praesent arcu nisl, cursus quis lacinia ac, aliquet sit amet risus. Praesent urna mi, ultrices vel est vel, luctus feugiat nulla. Nam posuere purus nisi, sed porta velit sagittis eget. Nunc porta sollicitudin nulla, vel malesuada sem consequat in. Sed rhoncus convallis consectetur. Suspendisse potenti. Vestibulum eget mauris justo. Phasellus bibendum sed augue quis facilisis. Ut faucibus ligula pharetra tortor efficitur, ut auctor ligula mollis. Proin id lacinia lacus. Nunc lacus ex, rutrum non arcu non, aliquet cursus dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel risus posuere, aliquam velit id, mollis est. Aliquam mollis vel nunc vitae rhoncus. Praesent arcu nisl, cursus quis lacinia ac, aliquet sit amet risus. Praesent urna mi, ultrices vel est vel, luctus feugiat nulla. Nam posuere purus nisi, sed porta velit sagittis eget. Nunc porta sollicitudin nulla, vel malesuada sem consequat in. Sed rhoncus convallis consectetur. Suspendisse potenti. Vestibulum eget mauris justo. Phasellus bibendum sed augue quis facilisis. Ut faucibus ligula pharetra tortor efficitur, ut auctor ligula mollis. Proin id lacinia lacus. Nunc lacus ex, rutrum non arcu non, aliquet cursus dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel risus posuere, aliquam velit id, mollis est. Aliquam mollis vel nunc vitae rhoncus. Praesent arcu nisl, cursus quis lacinia ac, aliquet sit amet risus. Praesent urna mi, ultrices vel est vel, luctus feugiat nulla. Nam posuere purus nisi, sed porta velit sagittis eget. Nunc porta sollicitudin nulla, vel malesuada sem consequat in. Sed rhoncus convallis consectetur. Suspendisse potenti. Vestibulum eget mauris justo. Phasellus bibendum sed augue quis facilisis. Ut faucibus ligula pharetra tortor efficitur, ut auctor ligula mollis. Proin id lacinia lacus. Nunc lacus ex, rutrum non arcu non, aliquet cursus dolor.</p>

        <hr />

      </div>
    </div>
    </div>
  </div>
  <div id="east" class="column duo">
    <div class="toggle">
    </div>

    <div class="menu closed">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Stuff</li>
          <li>Cooking</li>
          <li>Games</li>
        </ul>
    </div>

    <div class="container">
    <div class="content">
      <div class="text">
      <h1>Off canvas nav</h1>

        <hr />

        <h2>The toggle is the green bar on the left.<br>It transforms into an overlay - Click on it to close the menu.</h2>

        <hr />

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel risus posuere, aliquam velit id, mollis est. Aliquam mollis vel nunc vitae rhoncus. Praesent arcu nisl, cursus quis lacinia ac, aliquet sit amet risus. Praesent urna mi, ultrices vel est vel, luctus feugiat nulla. Nam posuere purus nisi, sed porta velit sagittis eget. Nunc porta sollicitudin nulla, vel malesuada sem consequat in. Sed rhoncus convallis consectetur. Suspendisse potenti. Vestibulum eget mauris justo. Phasellus bibendum sed augue quis facilisis. Ut faucibus ligula pharetra tortor efficitur, ut auctor ligula mollis. Proin id lacinia lacus. Nunc lacus ex, rutrum non arcu non, aliquet cursus dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel risus posuere, aliquam velit id, mollis est. Aliquam mollis vel nunc vitae rhoncus. Praesent arcu nisl, cursus quis lacinia ac, aliquet sit amet risus. Praesent urna mi, ultrices vel est vel, luctus feugiat nulla. Nam posuere purus nisi, sed porta velit sagittis eget. Nunc porta sollicitudin nulla, vel malesuada sem consequat in. Sed rhoncus convallis consectetur. Suspendisse potenti. Vestibulum eget mauris justo. Phasellus bibendum sed augue quis facilisis. Ut faucibus ligula pharetra tortor efficitur, ut auctor ligula mollis. Proin id lacinia lacus. Nunc lacus ex, rutrum non arcu non, aliquet cursus dolor.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel risus posuere, aliquam velit id, mollis est. Aliquam mollis vel nunc vitae rhoncus. Praesent arcu nisl, cursus quis lacinia ac, aliquet sit amet risus. Praesent urna mi, ultrices vel est vel, luctus feugiat nulla. Nam posuere purus nisi, sed porta velit sagittis eget. Nunc porta sollicitudin nulla, vel malesuada sem consequat in. Sed rhoncus convallis consectetur. Suspendisse potenti. Vestibulum eget mauris justo. Phasellus bibendum sed augue quis facilisis. Ut faucibus ligula pharetra tortor efficitur, ut auctor ligula mollis. Proin id lacinia lacus. Nunc lacus ex, rutrum non arcu non, aliquet cursus dolor.</p>

        <hr />

      </div>
    </div>
    </div>
  </div>
</main>

script.js

$( "#west .toggle" ).click(function() {
  $("#west .menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $("#west .content").toggleClass("closed");
  $("#west .container").toggleClass("closed")
});
$( "#east .toggle" ).click(function() {
  $("#east .menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $("#east .content").toggleClass("closed");
  $("#east .container").toggleClass("closed")
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/*Experimental and unfinished !!*/

* { 
  font-family:courier; 
  box-sizing:border-box;
}

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
  min-height:100%; 
  background-color:floralwhite; 
}
main{
  display: flex;
  flex-direction: row;
    height: 100vh;
  width: 100vw;
}
.column{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.duo{
    width: 50vmax;
}
.menu { 
  width:250px; 
  height:100%; 
  position:fixed; 
  background-color:seagreen;
  transition:all 1s;  
  z-index:50; 
  overflow-y:auto; 
  padding-bottom:100px; 
}
#west .menu{
   left:0; 
}
#east .menu{
  right: 0;
}

#west .menu.closed { 
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%); 
}
#east .menu.closed { 
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.toggle { 
  background-color:seagreen; 
  height:100%; 
  min-height:100%; 
  width:50px; 
  position:fixed; 
  z-index:25;  
}
.toggle:hover { 
  cursor:pointer; 
} 
#west .toggle{
  top:0; 
  bottom:0; 
  left:0; 
  transition: width ease .7s;
}
#east .toggle{  
  top:0; 
  bottom:0; 
  right:0; 
  transition: width ease .7s;
}

.toggle.closed { 
  left:0; top:0; bottom:0; right:0; 
  width:100%; 
  height:100%; 
 
} 
.container { 
 display: table-cell;
} 
.closed { position:fixed; } 
.content { 
  width:100%; 
  height:100%; 
  margin-left:0px; 
  transition:all .4s;  
}
#west .content.closed .text { 
  transform: translateX(80px); 
}
#east .content.closed .text { 
  transform: translateX(-160px); 
}

.text { 
  width:60%; 
  margin:auto; 
  transition:all .4s ease; 
  margin-top:80px; 
  margin-bottom:80px; 
}

h1, h2 { 
  color:#444; 
}
p { 
  color:#444; 
}
p img { 
  float:left; 
  margin:15px; 
}

.menu ul { 
  list-style-type:none; 
  padding:0; 
  margin:85px 0 0 40px; 
  padding-right:40px; 
}
.menu ul li { 
  color:floralwhite; 
  font-size:20px; 
  margin:0 0 5px 0; 
  display:block; 
  height:40px; 
  line-height:40px; 
  padding-left:10px; 
  transition:all .3s; 
}
.menu ul li:hover { 
  background-color:lighten(seagreen, 10%); 
  cursor:pointer; 
} 
hr { 
  border:none; 
  height:1px; 
  background-color:seagreen;
  position:relative; 
  width:90%; 
  margin-left:0; 
}
hr:before { 
  content:"/"; 
  display:block; 
  top:-8px; 
  left:-5px; 
  position:absolute; 
  color:seagreen; 
}
*::selection { 
  background-color:darken(seagreen, 15%); 
  color:floralwhite;
}