Benny Sutton is 4 hire - just click here

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

JavaScript

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) {
              x.classList.toggle("change");
            }

CSS

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

Conclusion

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