<input type='checkbox' id='mmeennuu'>
<label class='menubar' for='mmeennuu'>

<div class='barry'>
  <span class='bar'></span>
  <span class='bar'></span>
  <span class='bar'></span>
</div>
  
<ul>
  <li><a id='home' href='#home'>Home</a></li>
  <li><a id='about' href='#about'>Products</a></li>
  <li><a id='contact' href='#contact'>About</a></li>
  <li><a id='link' href='#link'>Contact</a></li>
</ul>

</label>

$red:#F44336;

@mixin transition($in) {
  transition:$in;
  -webkit-transition:$in;
  -moz-transition:$in;
  -o-transition:$in;
  -ms-transition:$in;
}

body {
  margin:0;
  padding:0;
  background-color:#222;
}
* {
  font-family:Helvetica,sans-serif;
  color:#FFFFFF;
}

#mmeennuu {
  display:none;
}
.bar{
  transition: 0.5sec ease-in-out;
    -webkit-transform-origin: center;
          transform-origin: center;
}
#mmeennuu:checked ~ .menubar {

  width: 100%;
  border-radius:5px;
  background-color:$red;
  border: none;
  height:50px;

  &>ul {
    display:block;
    opacity:1;
  }
  &>.bar:nth-child(1) {
    -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari 3-8 */
  transform: rotate(45deg);
  }
  &> .bar:nth-child(2) {
    -ms-transform: rotate(135deg); /* IE 9 */
  -webkit-transform: rotate(135deg); /* Safari 3-8 */
  transform: rotate(135deg);
  }
  &>.bar:nth-child(3) {
    -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Safari 3-8 */
  transform: rotate(-45deg);
  }
}

.menubar {
  display:block;
  margin:20px 20px 0 0;
  float: right;
  width:65px;
  height:65px;
  background-color:$red;
  border: none;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  @include transition(all 0.3s ease-in-out);

  div.barry {
    width:30px;
    margin:22px auto;


    .bar {
      display:block;
      width:100%;
      height: 3px;
      margin-top: 4px;
      border-radius:2px;
      background-color:#fff;
    }
  }

  ul {
    opacity:0;
    display:none;
    @include transition(all 0.4s ease-in-out);
    list-style-type:none;
    padding:0;
    width:500px;
    text-align:center;
    margin-bottom: 0;

    li {
      margin: auto 0;
      display:inline-block;
      a {
        position: relative;
        text-decoration:none;
        display:inline-block;
        padding-bottom:18px;
        margin: 0 20px;
        color: #FFFFFF;
        font-size:14px;
        @include transition(all 0.4s ease-in-out);

        
        &:hover{
          &:after{
           content : "";
             position: absolute;
          z-index: 1000;
             left: 10%;
           bottom  : 0;
           height  : 2px;
            width   : 80%;  
            border-bottom:2px solid white;
        }
        }
      }
    }
  }
}

/*
Error 404.
Javascript Not Found.
*/