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="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
  <div class="drawer">
    <div class="drawer-navbar">
      <ul>
        <li class="btn-1">1</li>
        <li class="btn-2">2</li>
        <li class="btn-3">3</li>
      </ul>
    </div>
    
    <div class="drawer-content">
      <div class="content-placeholder">
        <div class="content-1"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-2"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-3"></div>
      </div>      
    </div>
  </div>
  <div class="other-content">
    following web content......sadfa
    sdfj
    asdjf
    sadjf
    sadjf
    jsad
    fjklxzcjlkzxcjv;lkjslkdjfl;kjaskdljflksd
    f
    asdf
    asd
    f
    adsf
    asd
    f
    ads
    fasd
    f
    asd
    fasd
    f
    asd
    fsad
    f
    adsf
    asd
    f
    asdfasd
    fasd
    f
    asdf
    asd
    fa
    sdfa
    sdjf
    asdjf
    aksdjfalskdjflkasdjflkjadslkjflkasf
    
  </div>
</body>
</html>
 
.drawer {
  position: fixed;
  width: 100%;
  height: 100px;
  border: 1px solid green;
}
​
.drawer-navbar {
  width: 100%;
}
​
.drawer-content {
  max-height: 0;
  overflow-y: hidden;
  transition: all 0.3s;
  background-color: gray;
  border: 3px solid black;
}
​
.drawer-content.show {
  max-height: 700px;
}
​
.content-placeholder {
  overflow-y: hidden;
  border: 1px solid yellow;
  
  position: absolute; */
  top: 90px;
  width: 100%;
}
​
.content-placeholder > div {
  transition: all 0.5s;
}
​
.content-placeholder.current {
  border: 5px solid yellow;
}
​
.content-1 {
  background-color: red;
  height: 300px;
}
​
.content-2 {
  background-color: green;
  height: 200px;
}
​
.content-3 {
  background-color: blue;
  height: 100px;
}
​
.other-content {
  position: relative;
  top: 100px;
}
 
$(document).ready(function () {
  var show1 = false,
      show2 = false,
      show3 = false,
      
      content1 = $('.content-1'),
      content2 = $('.content-2'),
      content3 = $('.content-3');
  
  var w = $(window).width() + 30;
  
  $(window).resize(function () {
    w = $(window).width() + 30;
  });
  
  function checkDrawer (shouldOpen) {
    if (shouldOpen) {
      $('.drawer-content').addClass('show');
    } else {
      $('.drawer-content').removeClass('show');
    }
  }
  
  $('.btn-1').on('click', function () {
    show1 = !show1;
    show2 = false;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
  
    content1.css('transform', 'translate(0, 0)');
    content2.css('transform', 'translate(' + w + 'px, 0)');
    content3.css('transform', 'translate(' + 2*w + 'px, 0)');
    content1.addClass('current');
    content2.removeClass('current');
    content3.removeClass('current');
  });
  
  $('.btn-2').on('click', function () {
    show1 = false;
    show2 = !show2;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    
    content1.css('transform', 'translate(-' + w + 'px, 0)');
    content2.css('transform', 'translate(0, 0)');
    content3.css('transform', 'translate(' + w + 'px, 0)');
    
    content1.removeClass('current');
    content2.addClass('current');
    content3.removeClass('current');
    
  });
  
  $('.btn-3').on('click', function () {
    show1 = false;
    show2 = false;
    show3 = !show3;
    checkDrawer(show1 || show2 || show3);
 
    content1.css('transform', 'translate(-' + 2 * w + 'px, 0)');
    content2.css('transform', 'translate(-' + w + 'px, 0)');
    content3.css('transform', 'translate(0, 0)');
​
    content1.removeClass('current');
    content2.removeClass('current');
    content3.addClass('current');
  });
});
Output 300px

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

Dismiss x
public
Bin info
rayjcwupro
0viewers