CodePen

HTML

            
              <div class="page-wrap">

  <header role="banner">
    <h1>Menu Reveal w/ CSS</h1>
    <a class="show-menu" href="#main-menu">Show Menu</a>
  </header>

  <nav id="main-menu">
    <a class="show-menu" href="#">Hide Menu</a>
    <a href="http://codepen.io/chriscoyier/pen/qpnGC" target="_blank">JavaScript Version</a>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
    <a href="#">Four</a>
    <a href="#">Five</a>
    <a href="#">Six</a>
    <a href="#">Seven</a>
    <a href="#">Eight</a>
  </nav>

  <section>

  </section>

  <aside>

  </aside>

</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 50px;
  @media (max-width: 600px) {
    padding: 10px;
  }
  background: #666;
  font: 16px Sans-Serif;
}
.show-menu {
  display: none;
  color: white;
  text-decoration: none;
  @media (max-width: 600px) {
    display: block;
    nav:target & {
      background: black;
      position: static;
    }
  }
}

.page-wrap {
  overflow: hidden;
}

header[role=banner] {
  position: relative;
  background: #f06d06;
  margin: 0 0 3% 0;
  padding: 20px;
  color: white;
}

nav {
  text-align: center;
  background: white;
  margin-bottom: 3%;
  a {
    text-decoration: none;
    display: inline-block;
    padding: 15px;
  }
  @media (max-width: 600px) {
    position: fixed;
    top: -9999px;
    left: -9999px;
    &:target {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      overflow: auto;
    }
    a {
      display: block;
      background: #f06d06;
      border: 1px solid white;
      color: white;
    }
  }
}

section, aside {
  float: left;
  padding: 20px;
  background: white;
  min-height: 500px;
}

section {
  width: 75%;
  margin-right: 3%;
}

aside {
  width: 22%;
}

.module {
  background: white;
  padding: 20px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................