A Pen by Stan Williams.

cssPanelMenu.markdown

cssPanelMenu

Based on http://jpanelmenu.com/

A Pen by Stan Williams on CodePen.

License.

index.html

<!-- forked from Dolores Portalatin http://codepen.io/meskarune/ 
--->
<nav class="main-nav" id="main-nav">
  <a href="#">Home</a>
  <a href="#">Blog</a>
  <a href="#">Media</a>
  <a href="#">About</a>
  <a href="#">Social</a>
  <a href="#">Contact</a>
</nav>

<div class="page-wrap">                  
    <a href="#main-nav" class="open-menu">
      ☰ Menu
    </a>
    <a href="#" class="close-menu">
      ☰ Close
    </a>
  
  <div class="content">

    <h2>This is a page ...</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dictum ligula, rhoncus viverra libero. Vestibulum in lectus sit amet dui gravida fringilla sit amet dignissim velit. Quisque id turpis ut quam hendrerit. Aliquam vel tortor egestas turpis auctor cursus. In ut velit feugiat, pellentesque magna non, ultrices eros. Phasellus blandit arcu pharetra lectus fermentum placerat not placemouse. Vestibulum condimentum leo fringilla mi aliquam sodales. </p>
        
    <p>Justo ut lacus varius lacinia. Vivamus ornare lorem nec dui sagittis faucibus. Maecenas libero tortor.</p>
        
    <p>Semper Fi&nbsp; &nbsp;non mauris ut, aliquet auctor enim. Aliquam rhoncus posuere molestie. Praesent ullamcorper ullamcorper fermentum. Mauris auctor sem interdum neque congue..</p>
    
    <p> Vivamus ac feugiat arcu. Maecenas consequat ultricies ultrices. Vestibulum feugiat sem a augue ultrices, et sollicitudin ipsum accumsan
    </p>
        
    <p>Cras justo magna, ultricies et consequat ac, commodo vel purus. Integer libero dui, condimentum et iaculis eget, volutpat quis metus. Aliquam erat volutpat. Morbi justo metus. </p>
        
    <p>Pharetra sed consequat vel, elementum egestas neque. Phasellus augue mi, scelerisque at odio ut.</p>
    
    <p>Proin tempor eros lorem, at elementum purus consectetur sed. Nam a dignissim tortor. Sed venenatis vel nisl quis placerat. Vivamus ac feugiat arcu. Maecenas consequat ultricies ultrices. Vestibulum feugiat sem a augue ultrices, et sollicitudin ipsum accumsan. Mauris pulvinar faucibus eros at rutrum. </p>
        
    <p><b>Doce ut discas</b> ...</p>
        
  </div>
  
</div>

script.js

/*

CSS version of 
http://jpanelmenu.com/

*/

style.scss

@import "compass";
* {
  box-sizing: border-box;
}

html, body { min-height: 100%; }
a { text-decoration: none; }

.main-header {
  background: linear-gradient(#3F94BF, #246485);
  padding: 5px;
  text-align: center;
  color: white;
  text-shadow: #222 0px -1px 1px;
  position: fixed;
  width: 100%;
  left: 0;
  transition: all 0.3s ease;
  a {
    position: absolute;
    left: 20px;
    top: 20px;
    color: white;
    font-size: 32px;
  }
}

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #3B3B3B;
  overflow-y: auto;
  transition: width 0.5s ease;
  a {
    display: block;
    background: linear-gradient(#3E3E3E, #383838);
    border-top: 1px solid #484848;
    border-bottom: 1px solid #2E2E2E;
    color: white;
    padding: 15px;
    &:hover, &:focus {
      background: linear-gradient(#484848, #383838);
    }
  }
  &:after {
    content: "";
    position: absolute;
    top: 00;
    right: 0;
    height: 100%;
    width: 34px;
  }
}

.content {
  padding: 100px 20px 20px 20px;
}

.close-menu {
  display: none;
}

#main-nav:target {
  width: 20%;
}
#main-nav:target + .page-wrap {
  width: 80%;
  .open-menu {
     display: none; 
  }
  .close-menu {
     display: block;
  }
  .main-header {
    width: 80%;
    left: 20%;
  }
}