This is a bit from a mobile menu css file… it's inside a mediaquery for iphone. Makes the menu icon "hamburger" thing and animates it in pure css.

README.md

This css makes this:

Look like this:

main.css.scss

// all this is in le mediaquery for iphone
aside {
    width: 100%;
    .box.nav {
      margin-top: -55px;
      &:before {
        // this is the menu toggle
        content: '|||';
        display: inline-block;
        font-size: 40px;
        line-height: 20px;
        font-weight: 800;
        margin-bottom: 30px;

        // animation stuffs
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transition: all 0.5s ;
        -moz-transition: all 0.5s ;
        -ms-transition: all 0.5s ;
        -o-transition: all 0.5s ;
        transition: all 0.5s ;
      }
      &:hover:before {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.5s ;
        -moz-transition: all 0.5s ;
        -ms-transition: all 0.5s ;
        -o-transition: all 0.5s ;
        transition: all 0.5s ;
      }
      ul {
        -webkit-transition: all 0.5s ;
        -moz-transition: all 0.5s ;
        -ms-transition: all 0.5s ;
        -o-transition: all 0.5s ;
        transition: all 0.5s ;
        max-height: 0px;
        opacity: 0;
        li {
          font-size: 23px;
          &:first-child {
            display: none;
          }
        }
      }
      &:hover ul {
        opacity: 1;
        max-height: 380px;
        -webkit-transition: all 0.5s ;
        -moz-transition: all 0.5s ;
        -ms-transition: all 0.5s ;
        -o-transition: all 0.5s ;
        transition: all 0.5s ;
      }
    }
  }

Rotating the three pipe characters is a very elegant solution. I'll have to try that sometime.