How to animate the Hamburger icon on a responsive template!

Most responsive templates use some type of mobile template page when the screen or device type says it needs to go small. The standard icon for menu is what’s called a hamburger icon! A menu (Hamburger) icon is 3 horizontal bars. The classic animation is to rotate a image to make three vertical bars.. Some just make it change color when hovered over or something.

Sprites which is what we used to call such images are out and fonts like FrontAwesome is in… Now we can have some fun….

Google animating hamburger icons using CSS only and you can find lots of cool info, so why add it here… I used the cool info from callmenick(dot)com/_development/css-hamburger-menu-icons and modified it to work on responsive SB v1 template for Zen Cart!! This should work on other templates too, just have to find the hamburger code..

This is how I did it using the responsive sheffield blue v1.1 free template on a Zen Cart v1.5.5e base. The RSB template was upgraded to ZC1.5.5e standards and fitted to work with COWAA!

So with that in mind, pull up a css sheet or create one of your own.. I use one for my nija form code so I just added to it. It needs to always load so use a name starting with stylesheet_NAME.css

Add the following css for the hamburger icon based on Nicks’ blog.

/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT
  Animating CSS-Only Hamburger Menu Icons
A collection of animating CSS-only hamburger menu icons. View demo 
[here](http://callmenick.com/_development/css-hamburger-menu-icons/).
----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 10%;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.1s;
          transition: background 0.1s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 18px;
  left: 10px;
  right: 10px;
  height: 4px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -10px;
}

.c-hamburger span::after {
  bottom: -10px;
}

/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx {
  background-color: #000;
}

.c-hamburger--htx:hover {
  background-color: #555753;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #0f3f57;
}

.c-hamburger--htx.is-active:hover {
  background-color: #555753;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}

Than in includes/template/YOUR_TEMPLATE/template/tpl_modules_mobile_categories_tabs.php
Replace the hamburger icon call on line 21 with this line..

<div class="toggleMenu" ><button class="c-hamburger c-hamburger--htx"><span>toggle menu</span></button></div>

At the very bottom right after the last closing div tag, add the script to detect the mouse click on your hamburger!!

  <script>
  (function() {

    "use strict";

    var toggles = document.querySelectorAll(".c-hamburger");

    for (var i = toggles.length - 1; i >= 0; i--) {
      var toggle = toggles[i];
      toggleHandler(toggle);
    };

    function toggleHandler(toggle) {
      toggle.addEventListener( "click", function(e) {
        e.preventDefault();
        (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
      });
    }

  })();
</script> 

I’ve spent allot of time modifying the css to down size and make it work for me.. Theres other things you can do here, the X is not that simple to resize… have fun