608.620.5104 | info@tenforward.consulting
Psst! We're hiring!

Our inclusive, feminist office is looking to hire for the following position:

Learn more about the job at our careers page, and learn more about Ten Forward as a company on our mission and vision page and about us page! 

Make a sweet mobile menu with CSS

Published March 28, 2016

Want this fancy menu? Try it out in this jsfiddle.


  height: 45px
  left: 0
  position: fixed
  top: 10px
  width: 70px

  &::before, &::after, span
    background-color: purple
    content: ''
    display: block
    height: 5px
    left: 20px
    position: absolute
    transition: none 0.5s ease 0.5s
    transition-property: transform, top, bottom, left, opacity
    width: 30px

    top: 10px

    top: 20px

    top: 30px

    &::before, &::after
      top: 20px

      transform: rotate(45deg)

      left: -50px
      opacity: 0

      transform: rotate(-45deg)


$('.menu').on('click', function(ev) {


<div class="menu">
Author details