Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<meta name="description" content="pure scroll sidenav">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1">
  <title>pure scroll sidenav</title>
<style type="unprocessed" id="AutoprefixerIn">%css%</style>
<style id="AutoprefixerOut"></style>
<script>
AutoprefixerSettings = { browsers: ['last 2 versions'] };
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer.process(document.getElementById("AutoprefixerIn").innerHTML, AutoprefixerSettings).css;
</script>
</head>
<body>
<div class="app app--slide">
  <div class="app-bar">nav</div>
  <div class="app-tray"><span id="menu">menu</span></div>
  <div class="app-well">
    <div class="app-panels">
      <div class="panel panel--menu">
        <div class="scrollport">
          <div class="scrollbox">
            <div class="content">menu</div>
          </div>
        </div>
      </div>
      <div class="panel panel--main">
        <div class="panel-para">
          <div class="panel-lax">
            <div class="scrollport">
              <div class="scrollbox">
                <div class="content">
                  <p>website</p>
                  <p>Scroll left, pure native css scroll-snapping and perspective menu pullover. One could add js to add a shadow based upon how far pulled out the menu is on the scroll position, and even add a toggle menu button that leverages scroll-behavior smooth, to "animate" the menu.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 
function setHeight() {
  var HTML = document.documentElement;
  var heightEl = document.createElement('div');
  heightEl.style.visibility = 'hidden';
  heightEl.style.position = 'absolute';
  heightEl.style.height = '100vh';
  HTML.appendChild(heightEl);
  var heightElHeight = window.getComputedStyle(heightEl).height;
  var ratioHeight = window.innerHeight / parseInt(heightElHeight,10);
  if (ratioHeight !== 1) {
    var newHeight = (ratioHeight * 100) + 'vh';
    HTML.style.setProperty('--viewportHeight', newHeight);
  }
  HTML.removeChild(heightEl);
}
​
var app = document.querySelector('.app');
var appWell = document.querySelector('.app-well');
var appBar = document.querySelector('.app-bar');
var cycleCount = 0;
var appClasses = ['','app--fixed','app--slide'];
​
document.addEventListener('DOMContentLoaded', function() {
  setHeight();
  setTimeout(function(){
    appWell.scrollLeft = appWell.scrollWidth - appWell.clientWidth;
    appWell.style.scrollBehavior = 'smooth';
  },10);
});
​
window.addEventListener("orientationchange", function() {
  setHeight();
});
​
appBar.addEventListener("click",function(){
  cycleClasses();
});
​
function cycleClasses() {
  var newIndex = cycleCount % appClasses.length;
  var newClass = 'app ' + appClasses[newIndex];
  var newText = 'Click to cycle menu visual : ' + newClass;
  app.className = newClass;
  appBar.textContent = newText;
  cycleCount++;
}
​
cycleClasses();
​
​
var menu = document.querySelector('#menu');
​
function trayClick() {
  if (appWell.scrollLeft == 0) {
    appWell.scrollTo(400,0);
  } else {
    appWell.scrollTo(0,0);
  }
}
​
menu.addEventListener('click',function(){
  trayClick();
});
​
​
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jonjohnjohnsonpro
0viewers