PureCSS fullscreen menu

index.html

<header>
  <input type='checkbox' id='toggle' style='display:none;' />
  <label class='toggle-btn toggle-btn__cross' for='toggle'>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </label>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact me</a></li>
    </ul>
  </nav>
</header>

<main>
  <div class='wrap'>
    <div class='title'>PureCSS fullscreen menu</div>
    <div class="content">
      Hellloo from the other Siiiiidddddeeeeee......<br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.
    </div>
  </div>
</main>

purecss-fullscreen-menu.markdown

PureCSS fullscreen menu

Pure CSS fullscreen menu concept.

A Pen by Akshay Nair on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);

:root {
  font-size:16px;
}

* {
  box-sizing:border-box;
  font-family:"Roboto","Helvetica","sans-serif";
  color:#555;
}

$th_pink:#E84A5F;
$th_dark:#2a363b;

body {
  margin:0;
  padding:0;
  background-color:darken($th_dark,10%);
}

main {
  min-width:200px;
  max-width:800px;
  margin:80px auto;
  padding:10px;
  
  .wrap {
    padding:40px 20px;
    background-color:#fff;
    //box-shadow:0 0 10px 2px rgba(0,0,0,.2);
  }
  
  .title {
    font-size:2em;
    text-align:center;
    margin:20px auto 40px;
    text-transform:uppercase;
  }
}

header {  
  nav {
    background-color:rgba(0,0,0,.8);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease-in-out;
    
    ul {
      list-style-type:none;
      padding:0;
      margin:0;
      position:absolute;
      left:50%;
      top:170px;
      transition:all 0.3s ease-in-out;
      transform:translateX(-50%);
    
      li {
        transform:translateY(50px);
        opacity:0;
        
        a {
          display:block;
          font-size:2em;
          text-decoration:none;
          padding:10px 0;
          text-align:center;
          color:#fff;
          font-weight:bold;
          transition:all 0.2s ease-in-out;
          text-shadow:1px 1px 2px rgba(0,0,0,.5);
          
          &:hover {
            color:$th_pink;
          }
        }
      }
    }
  }
}

.toggle-btn {
  display:block;
  position:fixed;
  z-index:10;
  right:10px;
  top:10px;
  cursor:pointer;
  
  .bar {
    width:30px;
    height:2px;
    margin:7px auto;
    background-color:#fff;
    transition:all 0.3s ease-in-out;
    box-shadow:0 0 3px 1px rgba(0,0,0,.3);
    
    &:nth-child(2) {
      width:20px;
    }
  }
}

#toggle:checked {
  &~nav {
    opacity:1;
    visibility:visible;

    ul {
      top:70px;
      
      li {
        transform:translateY(0px);
        opacity:1;

        @for $i from 1 through 4 {
            $t: $i * 0.1;
            &:nth-child(#{$i}) {
              transition:all 0.3s cubic-bezier(.6,0,.8,1.5) #{$t}s; 
            }
          }
      }
    }
  }
  
  &+label.toggle-btn {
    .bar {
      background-color:red;

      &:nth-child(2) {
        transform:translateX(50px);
        opacity:0;
      }

      &:nth-child(1) {
        transform:translateY(10px) rotate(45deg);
      }

      &:nth-child(3) {
        transform:translateY(-8px) rotate(-45deg);
      }
    }
  }
}