Hamburger menu icon

Obfuscate email address JavaScript

One thing all mobile menus need is a hamburger menu. Here's a particularly easy one that is almost pure CSS with a couple of lines of JavaScript

See the working demo below.

Demo: Hamburger menu icon


Not much JavaScript need - just enough to toggle the class. This is pretty much the standard JavaScript you'll paste into your page script block - or in a .js file if you prefer.

            function myFunction(x) {


Edit as necessary.

        .bar1, .bar2, .bar3 {
          width: 35px;
          height: 5px;
          background-color: #333;
          margin: 6px 0;
          transition: 0.4s;

        .change .bar1 {
          -webkit-transform: rotate(-45deg) translate(-9px, 6px);
          transform: rotate(-45deg) translate(-9px, 6px);

        .change .bar2 {opacity: 0;}

        .change .bar3 {
          -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);


A few lines of JQuery is all you need to toggle a CSS hamburger menu icon