LESS / CSS only hamburger menu - no js

index.pug

nav(role='navigation')
  #menuToggle
    //
      hidden checkbox is used as click reciever,
      so you can use the :checked selector on it.
    input(type='checkbox')
    //
      Some spans to act as a hamburger.
      They are acting like a real hamburger,
      not that McDonalds stuff.
    span
    span
    span
    ul#menu
      a(href='#')
        li Home
      a(href='#')
        li About
      a(href='#')
        li Info
      a(href='#')
        li Contact
.container
  p
    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis consectetur ex. Proin venenatis, libero sit amet volutpat maximus, enim sem lacinia nisi, sit amet tincidunt urna est quis lorem. Proin sollicitudin nulla id luctus facilisis. Aliquam
    | id nulla eros. Suspendisse sed sem risus. Donec venenatis nunc urna, vel eleifend orci tempor ut. Nunc molestie quis sapien sed consequat. Suspendisse neque felis, interdum sed porttitor vitae, molestie sed nulla. Sed rutrum vel neque non gravida.
  p
    | Donec volutpat pharetra luctus. Vestibulum placerat urna eget sem efficitur lacinia. Etiam scelerisque euismod nisi, ut egestas sapien. Curabitur eu aliquet turpis. Donec elementum in tellus sit amet aliquam. Aenean eget suscipit ipsum. Mauris quis ex
    | quis neque bibendum fermentum quis at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue ipsum, sagittis vitae commodo sit amet, tristique in nisi.
  p
    | Vivamus iaculis suscipit suscipit. Nullam commodo diam in placerat ultrices. Sed a gravida est, non convallis risus. Ut et dolor ac ex bibendum efficitur in sed justo. Maecenas massa mi, feugiat in efficitur sed, mattis non felis. Ut consectetur, mi a
    | pretium placerat, ligula massa fringilla quam, eget mollis metus turpis sed ante. Ut id elementum nisi, a consequat risus. Phasellus commodo varius leo, faucibus vehicula ligula scelerisque in. Nam bibendum congue nibh et placerat. Aliquam fermentum
    | neque sed enim volutpat, vel semper erat faucibus. Nunc neque ipsum, lacinia vel rutrum ac, feugiat sit amet dolor. Aliquam sed ex eu massa condimentum semper. Phasellus placerat elit non dolor consequat, at egestas velit cursus. Vivamus volutpat
    | libero id leo tristique, eu iaculis ligula blandit. Vestibulum congue nulla quis dictum tempor.
  p
    | Integer a rutrum urna. In iaculis sagittis nunc, in consectetur mauris ornare non. Aliquam erat volutpat. Sed porttitor vel ex in malesuada. Curabitur fringilla convallis blandit. Curabitur nisl ligula, eleifend at lobortis non, vehicula sed ex. Morbi
    | ultricies dolor vel volutpat laoreet. Mauris cursus at ligula vitae pretium.
  p
    | Proin tortor sem, rhoncus sed vulputate ac, maximus sit amet odio. Donec efficitur nec tortor non ultricies. In sed lorem egestas, venenatis metus at, vehicula nisl. Pellentesque nec dictum nulla. Nam auctor semper malesuada. Sed condimentum volutpat
    | leo id consequat. Fusce volutpat magna ante, at sagittis leo convallis vel. Proin consequat vel nibh vel ornare. Mauris finibus orci suscipit condimentum faucibus. Fusce in sem tincidunt, facilisis purus non, semper enim. Pellentesque aliquam massa
    | at commodo commodo. Nulla nec aliquam dui. Nam varius mattis nunc non vehicula. Praesent sollicitudin, quam et tincidunt laoreet, arcu orci ullamcorper ipsum, vel consectetur ante sem sed elit. Curabitur at efficitur urna.

less-css-only-hamburger-menu-no-js.markdown

LESS / CSS only hamburger menu - no js

A Pen by OpenCo on CodePen.

License.

style.less

/*
 * hamburger
 */
/*
 * And let's slide it in from the left
 */
body {
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}
.container {
  padding: 5em;
}
a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
  &:hover {
    color: tomato;
  }
}
#menuToggle {
  display: block;
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 1;
  user-select: none;
  input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
    &:checked {
      ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
        &:nth-last-child(3) {
          opacity: 0;
          transform: rotate(0deg) scale(0.2, 0.2);
        }
        &:nth-last-child(2) {
          transform: rotate(-45deg) translate(0, -1px);
        }
      }
      ~ ul {
        transform: none;
      }
    }
  }
  span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
    &:first-child {
      transform-origin: 0% 0%;
    }
    &:nth-last-child(2) {
      transform-origin: 0% 100%;
    }
  }
}
#menu {
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  li {
    padding: 10px 0;
    font-size: 22px;
  }
}