CodePen

HTML

            
              <input type="checkbox" id="ux-main-nav">
<nav role='navigation' class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <label class="close-button" for="ux-main-nav">
    <b class="visually-hidden">Close</b>
    <span aria-hidden="true">
      ×
    </span>
  </label>
</nav>

<h1>Line Menu Icon OR IS IT?!</h1>
  
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eum ipsam sit a porro velit ratione recusandae rem maiores ullam minima assumenda quas quibusdam aperiam voluptas veniam architecto accusantium neque sequi fugit enim tempora voluptates. Aperiam ut animi quos delectus ullam vel impedit debitis necessitatibus!</p>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Boogaloo);

body {
  background: #F06D06;
  padding: 2rem 4rem 2rem 8rem;
  color: white;
  font-family: "Lucida Grande", sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow: scroll;
}
/* hide the checkbox from everyone */
input[id^='ux'] {
   display:none; 
}
.main-nav {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li {
    display: inline-block;
    padding: 5px;
  }
  a {
    color: white;
    text-decoration: none;
  }
  .close-button {
    display: none;
  }
}

.csstransforms .main-nav {
  position: absolute;
  top: 2.4rem;
  left: 2rem;
  width: 20rem;
  border: solid 1rem white;
  background: rgba(#F06D06, 0.75);
  box-shadow: 0 0 5px rgba(black, 0.2);
  padding: 4rem;
  transition: 0.3s ease;
  transform: scale(0.11) translateZ(0);
  transform-origin: top left;
  cursor: pointer;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  a {
    font-family: 'Boogaloo', cursive;
    font-size: 1.6rem;
    text-transform: uppercase;
    display: block;
    margin: 0 0 2rem 0;
    padding: 0.5rem;
    color: transparent;
    &:hover, &:focus {
      background: black;
      color: white !important;
    }
  }
  li {
    background: white;
    display: block;
    padding: 0;
  }
  li:last-child a {
    margin: 0;
  }
}
.csstransforms input:checked ~ .main-nav {
    transform: scale(1.0);
    padding: 2rem;
    ul {
      pointer-events: auto;
    }
    a {
      color: black;
    }
    .close-button {
      top: -2rem;
      left: -2rem;
      border: 0.5rem white solid;
      border-radius: 50%;
      background: #F06D06;
      text-align: center;
      width: 4rem;
      height: 4rem;
      color: white;
      font-weight: bold;
      font-size: 2rem;
      opacity: 1;
      span {
        position: relative;
        top: -3px;
      }
      &:hover, &:active {
        background: black; 
      }
    }
  }
  .csstransforms .close-button {
    display: block;
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity: 0;
    transition: opacity 0.2s ease;
    outline: 0;
  }


h1 {
  font-family: 'Boogaloo', cursive;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-size: 3rem;
}

.visually-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*$('<button class="close-button">\
    <b class="visually-hidden">Close</b>\
    <span aria-hidden="true">\
      ×\
    </span>\
  </button>').appendTo(".main-nav");

$(".main-nav").on("click", function() {
   $(this).toggleClass("open");
  return false;
});*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................