A Pen by Chris Coyier.

index.html

<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>
</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>

Line-Menu-Icon-that-Expands-Into-Actual-Menu.markdown

Line Menu Icon that Expands Into Actual Menu

It's smallen-ized through CSS transforms and then expands when you click on it by adding a class. Some elements are hidden when small to make it seem like a simplified icon.

A Pen by Chris Coyier on CodePen.

License.

script.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;
});

style.scss

@import "compass";
@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;
}

.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;
  }
  &.open {
    transform: scale(1.0);
    padding: 2rem;
    ul {
      pointer-events: auto;
    }
    a {
      color: black;
    }
    .close-button {
      opacity: 1;
    }
  }
  .close-button {
    display: block;
    position: absolute;
    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: 0;
    transition: opacity 0.2s ease;
    outline: 0;
    span {
      position: relative;
      top: -3px;
    }
    &:hover, &:active {
      background: black; 
    }
  }
}

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

.visually-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}