A Pen by Avaz Bokiev.

index.html

<article>
  <input type="checkbox" class="menu-button" /> 
 <aside>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 13</li>
    <li>List 14</li>
    <li>List 15</li>
    <li>List 16</li>
    <li>List 17</li>
    <li>List 18</li>
    <li>List 19</li>
    <li>List 20</li>
    <li>List 21</li>
    <li>List 22</li>
    <li>List 23</li>
    <li>List 24</li>
    <li>List 25</li>
  </ul>
 </aside>
  <div class="content">
    <h1>Content</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
  </div>
</article>  

Responsive-layout-with-left-offset-navigation.markdown

Responsive layout with left offset navigation

Pure CSS

A Pen by Avaz Bokiev on CodePen.

License.

style.css

body{
  background: #eee;  
}

article{
  width: 100%;
}

aside{
  background: #fff;
  width: 250px;
  height: 100%;
  position: fixed;
  overflow: scroll;
}

aside ul{
  margin: 0;
  padding: 0 0 150px 0;
}

aside ul li{
  background: linear-gradient(#ddd, #fff);
  list-style: none;
  font: 14px Arial;
  padding: 20px 10px 20px 15px;
  
}

.content{
  margin-left: 250px;
  padding: 15px;
  column-count: 3;
  column-gap: 20px;
}

.menu-button{
  display: none;
}


@media only screen and (max-width: 992px){
  .content{
    column-count: 2;
  }
}

@media only screen and (max-width: 768px){
  aside{
    margin-left: -270px;
    transition: .3s linear;
  }
  
  .menu-button{
    appearance: none;
    background-image: linear-gradient(90deg, #222 0%, #222 50%, orange 50%);
    cursor: pointer;
    width: 32px;
    height: 32px;
    outline: none;
    box-sizing: content-box;
    border-radius: 3px;
    float: right;
    display: block;
  }
  
  .menu-button:checked{
    background-image: linear-gradient(90deg, orange 0%, orange 50%, #222 50%);
  }
  
  .menu-button:checked ~ aside{
    margin-left: 0;
  }
  
  .menu-button:checked ~ .content{
    margin-left: 250px;
  }
  
  .aside:hover{
    margin-left: 0;
  }
  
  .content{
    column-count: 1;
    margin-left: 0;
    transition: .3s linear;
  }
}