HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>

</head>
<body>
<div id="wrapper" class="active">

<div id="sidebar-wrapper">
<div class="sidebar-nav">

*Sidebar Content*

</div>
</div>

<div id="page-content-wrapper">
  
<div class="content-header">
  
<a id="menu-toggle" href="#">menu toggle</a>
  *Header Content*
</div>
			
    
<div class="page-content inset">

*Page Content*
  
</div>
</div>

</div>
  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</body>
</html>

/* MENU TOGGLE */ #menu-toggle { 
background-color: #121212;
border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
float: left;
font-family: Ubuntu, Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
line-height: 14.285715103149414px;
margin: -2px;
padding: 9px 9px 9px 5px;
text-align: center;
text-decoration: none;
width: 51px;}

/* PAGE WRAPPER */ #wrapper { padding-left: 185px; transition: all 0.4s ease 0s; }

/* SIDEBAR WRAPPER*/ #sidebar-wrapper { margin-left: -185px; left: 185px; width: 185px; background: #121212; position: fixed; height: 100%; overflow-x: hidden; z-index: 5; transition: all 0.4s ease 0s; color:#fff; }

/* MENU TOGGLE */ #menu-toggle { display: none; }

/* HEADER */  .content-header { height: 65px; line-height: 65px; background-color: #FAEBD7; } /* Set the line-height to the height of the header and text will be centered vertically! Just in case you wanted a header and such. */

/* / / / / / / / / / / ALTERNATE DISPLAY: CONDITIONS SMALLER THAN 767PX */ @media (max-width:767px) {

/* PAGE WRAPPER */ 
#wrapper { padding-left: 0; }
#wrapper.active { position: relative; left: 185px; }

/* MENU TOGGLE */ #menu-toggle { display: block; }

/* SIDEBAR WRAPPER */ 
#wrapper.active #sidebar-wrapper { left: 185px; width: 185px; transition: all 0.4s ease 0s; }
#sidebar-wrapper { left: 0; }

} /* / / / / / / / / / / ALTERNATE DISPLAY END */