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.0.min.js"></script>
  <meta(http-equiv="X-UA-Compatible", content="IE=Edge"/>
  <meta charset="utf-8">
  <meta content='True', name='HandheldFriendly'/>                                               <meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <div class="header">
    <a href="#"><i class="fa fa-angle-left"></i></a>
    <a href="#" class="logo"><i class="fa fa-leaf logo"></i></a>
    <a href="#">Side Bar App</a>
  </div>
  <div class="mask">
  </div>
  <div class="main below-heading">
    <div class="main-inner">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="side-menu below-heading">
    <div class="side-menu-inner">
      <p>side1</p>
      <p>side2</p>
    </div>
  </div>
</body>
<script>
  var show = function() {
    $('body').addClass('showing-side-menu');
    setTimeout(function() {
      $('body').addClass('animating');
    },0);
  };
  var hide = function() {
    $('body').removeClass('animating');
    setTimeout(function() {
      $('body').removeClass('showing-side-menu');
    },200);
​
  };
  $('a').bind('click', show);
  $('.mask').bind('click', hide);
</script>
</html>
 
/* Additions to Normalize */
html, body { height:100%; width: 100% }
* {
  box-sizing: border-box
}
​
/* Generic Functionality */
.main.below-heading {
  padding: 4em 1em 1em 1em;
}
.side-menu.below-heading {
  padding: 4em 1em 1em 1em;
}
​
/* The header always is at the top and unshaded */
.header {
  position: absolute;
  background-color: #DDD;
  width: 100%;
  height: 3em;
  z-index: 1;
  border-bottom: 2px solid rgb(169,169,169);
  padding: 0.5em 0 0 1em;
  font-size: 1.5.em;
}
.header a {
  text-decoration: none;
  color: #444;
  vertical-align: middle;
  vertical-align: middle;
}
.header a.logo {
  color: #1D1;
  margin-top: 0;
  font-size: 200%;
}
​
/* The main area is below the header and is everything (to the user) which is not a side bar */
.main {
  background-color: #F5F5F5;
  color: black;
  width: 100%;
  height: 100%;
}
.main p { margin: 0 }
​
/* The mask which is put over the body when the side bar is slid out */
body .mask {
  background-color: rgba(169,169,169,0);
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
body.showing-side-menu .mask {
  transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
  display: block;
}
body.showing-side-menu.animating .mask {
  background-color: rgba(169,169,169,0.8);
}
​
/* The side menu */
.side-menu {
  position: absolute;
  background-color: white;
  color: #444;
  width: 80%;
  top: 0;
  left: -80%;
  height: 100%;
  transition: all 0.2s;
  -webkit-transition: left 0.2s;
}
.side-menu-inner {
  margin: 1em;
}
body.showing-side-menu.animating .side-menu {
  left: 0;
}
Output

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

Dismiss x
public
Bin info
forbesmyesterpro
0viewers