title: Full screen overlay menu (pure css) - Close it by clicking the menu link
body: <p>HTML</p>
  
  <pre><code>&lt;input type="checkbox" id="op"&gt;
  &lt;/input&gt;&lt;div class="lower"&gt;
  &lt;label for="op"&gt;click the text&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="overlay overlay-hugeinc"&gt;
  &lt;label for="op"&gt;&lt;/label&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>@import "http://webfonts.ru/import/notcourier.css";
  body{   background:url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg')
  }
  .lower{
  width:340px;
  margin:10% auto;
  padding:50px;
  background:white;
  opacity:0.8;
  color:black;
  box-shadow:inset 0 0 0 1px black;
  border:30px solid white;
  }
  .lower:hover{
  background:black;
  color:white;
  box-shadow:inset 0 0 0 1px white;
  border:30px solid black;
  }
  input{
  display:none;
  }
  .lower label{
  font-family: 'NotCourierSans';
  text-transform:uppercase;
  font-size:40px;
  text-align:center;
  }
  .lower label:hover{
  cursor:pointer;
  }
  .overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.9);
  }
  .overlay label{
  width: 58px;
  height:58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background: url('http://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
  z-index: 100;
  cursor:pointer;
  }
  .overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 54px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  }
  .overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
  }
  .overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
  }
  .overlay ul li a {
  font-weight: 300;
  display: block;
  color: white;
  text-decoration:none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  font-family: 'NotCourierSans';
  text-transform:uppercase;
  }
  .overlay ul li a:hover,
  .overlay ul li a:focus {
  color: #849368;
  }
  .lower~.overlay-hugeinc{
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  }
  #op:checked~.overlay-hugeinc{
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  }
  .overlay-hugeinc nav {
  -moz-perspective: 300px;
  }
  .overlay-hugeinc nav ul {
  opacity: 0.4;
  -webkit-transform: translateY(-25%) rotateX(35deg);
  transform: translateY(-25%) rotateX(35deg);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  }
  #op:checked~.overlay-hugeinc nav ul {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  }
  #op:not(:checked)~.overlay-hugeinc nav ul {
  -webkit-transform: translateY(25%) rotateX(-35deg);
  transform: translateY(25%) rotateX(-35deg);
  }
  </code></pre>
  
  <p><a href="http://codepen.io/vladaoleynik/pen/vExKxJ" rel="nofollow">Full screen overlay menu (pure css)</a></p>
  
  <p>Hello, I'm using this code to make an overlay menu with just css. Its works fine but I want it to close when I click a menu link, not just the close icon.</p>
  
  <p>This will be an one page design website, so the menu ideally will slide down and away and the new content displayed.</p>